CODEWITHSUNDEEP
htmlcsswordpresselementor
bieksler
bieksler

Reputation: 23

How do I change a button's style property on hover?

EDIT: My website can be found at http://caconline.ca/.

I'm currently revamping a website for a school club using Elementor on WordPress. Basically, I want to achieve an effect that can be found on the buttons on the website http://www.fleshbeauty.com. When you hover on any one of the buttons that has a black border around it, you can see a light pink drop-shadow that is pushed a bit upon hover. I'm trying to achieve that same effect on my school club's website, but reversed - so the regular button would have a red-coloured fill already, and when you hover on the button, a border will appear that is pushed a bit from the button.

One of the solutions I found so far was to use the ::before selector in the custom CSS, but Elementor doesn't recognize it.

This is what my code looks like so far:

a.elementor-button-link.elementor-button.elementor-size-xl:hover {
z-index: -1;
border: 3px solid #000000;
margin: -10px -10px 10px 10px; }

And again, this is what I want my desired result to look like, but reversed:

Button found on Flesh Beauty

Any help is appreciated. Thank you!

Upvotes: 2

Views: 2170

Answers (2)

Habib
Habib

Reputation: 308

It would be better if you add your html and css, here is something which I understand from your question.

.button{padding:10px 35px; display:inline-block; background:none; border:1px solid #000; margin:30px; position:relative; color:#000; text-decoration:none; }
.button:before{background:pink; width:100%; height:100%; top:0; left:0; transform:translate(0px, 0px); content:''; position:absolute; z-index:-1; opacity:0; transition: all ease-in-out .5s;}
.button:hover:before{opacity:1;transform:translate(-10px, -10px);}
<a class="button" href="#">Explore</a>

Upvotes: 0

Lumnezia
Lumnezia

Reputation: 796

I'm not completely sure I understand you correctly. But I tried to recreate what I think you wanted. 

button{
  background-color: #fdd;
  border: 0;
  position: relative;
  margin: 20px;
  padding: 10px;
}

button::after{
  content: ' ';
  position: absolute;
  display: static;
  top: 0px;
  left: 0px;
  opacity: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  border: 2px solid #000;
  transition: 200ms;
}

button:hover::after{
  top: 5px;
  left: 5px;
  opacity: 1;
}

https://codepen.io/Lumnezia/pen/wNZvaZ

( Also here is another version, where the text will move with the border aswell https://codepen.io/Lumnezia/pen/KJYKad )

If you have any questions on how to use ::after or ::before, feel free to drop a comment. The code should be rather simple if you have a basic understanding of CSS.

Upvotes: 2

Related Questions