Button hover Color Change

Question

I have created an abstract type button (was meant to be a cloud originally, but has become something different!)

But now I am unable to change the hover color of all the elements in the button - can somebody see what I am doing wrong in that part?

Here is the code I am using for the button which I have hacked together from various tutorials I am watched on this.

.btn {
  position: relative;
  width: 150px;
  height: 50px;
  border-radius: 50%;
  background-color: #66b65d;
  transition: background-color 100ms linear, height 70ms ease-in, width 70ms ease-in;
  cursor: pointer;
  z-index: 999 !important;
}

.btn:before {
  content: "";
  display: block;
  width: 130px;
  height: 30px;
  position: absolute;
  top: 89;
  border-radius: inherit;
  background-color: #5ca754;
  ;
  z-index: -1 !important;
}

.btn:after {
  content: "";
  display: block;
  width: 130px;
  height: 30px;
  position: absolute;
  top: 89;
  border-radius: inherit;
  background-color: #508f49;
}

.btn:before {
  left: -10%;
  margin-left : calc( ( #{75)   );

}

.btn:after {
  right: 100%;
  margin-right : calc( ( #{25)   );

}

What do you mean by HTML implementation - a real life example of it? — mrlennyman
– mrlennyman, Commented Aug 25, 2018 at 9:39

Stys · Accepted Answer · 2018-08-24 15:11:23Z

4

You can use the "hover" properties same :

.btn:hover,
.btn:hover:before,
.btn:hover:after {
    background-color: #886633;
}

answered Aug 24, 2018 at 15:11

Stys

665 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mrlennyman Over a year ago

Wonderbar - I did try that but it didn't work - but now that I tried it using yours and added it to the top of the Custom CSS box, it HAS worked. Thank you!

mkk · Accepted Answer · 2018-08-24 15:42:48Z

1

This code should work .

.btn:hover {
 background-color: red;
 }
.btn:hover:before {
 background-color: red;
}
.btn:hover:after {
 background-color: red;
}

The only thing which was not clear was margin-left: calc( ( #{75) );. I have attached the codepen for the same . https://codepen.io/anon/pen/GXpbLo

answered Aug 24, 2018 at 15:42

mkk

566 bronze badges

1 Comment

mrlennyman Over a year ago

Yes that has worked very well thank you Madhuri - that code: margin-left: calc( ( #{75) ); was causing an issue. Your attached revision has fixed the issue - many thanks for your time and consideration!

Collectives™ on Stack Overflow

Button hover Color Change

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related