CODEWITHSUNDEEP
htmlcssbuttonmousehover
David Kris
David Kris

Reputation: 661

Change image in button on hover

I want to change the image on the button to this white version of it:http://res.cloudinary.com/djxai1v1e/image/upload/v1498062883/HR-Connect-Logowhite_fb7duw.png when hovered on. I thought I would just add a background-image to the :hover but that didn't work. Does anyone know how I can accomplish this? Anything helps, Cheers!

.button_slidehr {
  color: #156466;
  border: 1px solid rgba(21,100,102,0.35);
  border-radius: 0px;
  /* extend left padding */
  padding: 18px 15px 18px 62px;
  position: relative;
  display: inline-block;
  font-family: Verdana;
  font-size: 14px;
  margin-bottom: 20px;
  letter-spacing: 1px;
  background-color: rgba(255,255,255,0.3);
  cursor: pointer;
  box-shadow: inset 0 0 0 0 #156466;
  -webkit-transition: ease-out 0.4s;
  -moz-transition: ease-out 0.4s;
  transition: ease-out 0.4s;
}

.slide_downhr:hover {
  color:white;
  border: 1px solid transparent;
  box-shadow: inset 0 100px 0 0 #156466;
}

.button_slidehr:after {
  content: "";
  display: inline-block;
  position: absolute;
  left: 10px;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url(http://res.cloudinary.com/djxai1v1e/image/upload/v1498058230/HR-Connect-Logo_hjbrmn.png);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: auto 80%;
}
<div class="button_slidehr slide_downhr">Contact HR Now></div>

Upvotes: 0

Views: 978

Answers (2)

Artsiom Miksiuk
Artsiom Miksiuk

Reputation: 4303

.button_slidehr {
  color: #156466;
  border: 1px solid rgba(21,100,102,0.35);
  border-radius: 0px;
  /* extend left padding */
  padding: 18px 15px 18px 62px;
  position: relative;
  display: inline-block;
  font-family: Verdana;
  font-size: 14px;
  margin-bottom: 20px;
  letter-spacing: 1px;
  background-color: rgba(255,255,255,0.3);
  cursor: pointer;
  box-shadow: inset 0 0 0 0 #156466;
  -webkit-transition: ease-out 0.4s;
  -moz-transition: ease-out 0.4s;
  transition: ease-out 0.4s;
}

.slide_downhr:hover {
  color:white;
  border: 1px solid transparent;
  box-shadow: inset 0 100px 0 0 #156466;
}

.button_slidehr:hover:after {
  background-image: url(http://res.cloudinary.com/djxai1v1e/image/upload/v1498062883/HR-Connect-Logowhite_fb7duw.png);
}

.button_slidehr:after {
  content: "";
  display: inline-block;
  position: absolute;
  left: 10px;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url(http://res.cloudinary.com/djxai1v1e/image/upload/v1498058230/HR-Connect-Logo_hjbrmn.png);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: auto 80%;
}
<div class="button_slidehr slide_downhr">Contact HR Now></div>

Upvotes: 2

Vlad Gor
Vlad Gor

Reputation: 236

.slide_downhr:hover:after {
  background-image: url(http://res.cloudinary.com/djxai1v1e/image/upload/v1498062883/HR-Connect-Logowhite_fb7duw.png);
}

Upvotes: 1

Related Questions