CODEWITHSUNDEEP
htmlcss
mrlennyman
mrlennyman

Reputation: 13

Button hover Color Change

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)   );

}

Upvotes: 1

Views: 110

Answers (2)

mkk
mkk

Reputation: 56

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

Upvotes: 1

Stys
Stys

Reputation: 66

You can use the "hover" properties same :

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

Upvotes: 4

Related Questions