How to change :before pseudo class width on hover?

HTML & CSS
1

Hi all! I just joined here, and I have a big problem and a question. So, I’m trying to make a button mirror image. I have gotten this far. My problem is with the button’s :before pseudo class, which is colored white. When I hover over my button, this pseudo class will not change to match the width of the button itself. I have tried a ton of ways to make it work, but all to no avail. My code is this :

  position: relative;
  top:80px;
  left:-300px;
  background: #94c4fe;
  background: linear-gradient(to bottom, #94c4fe 31%,#d3f6fe 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94c4fe', endColorstr='#d3f6fe',GradientType=0 );
-webkit-box-shadow:  0px 1px 3px 0px rgba(240,248,255, .2);   
    box-shadow:  0px 1px 3px 0px rgba(240,248,255, .2);
  width: 100px;
  height: 25px;
  margin: 10px auto;
  transition:  0.4s; /* Animation */
    transition:  all 0.4s ease-in-out;
  border: none;
	-webkit-border-radius: 7em;
	-moz-border-radius: 7em;
	border-radius: 7em;

}

.newbutton:hover {
  width:125px;
}

.newbutton:after,
.newbutton:before {
  content: "";
  position: absolute;
  display: block;
  width: inherit;
  height: 100%; 
  bottom: -120%; 
  border: none;
	-webkit-border-radius: 7em;
	-moz-border-radius: 7em;
	border-radius: 7em;
  pointer-events:none;
  z-index:-1;

} 
.newbutton:after { 
  -webkit-mask-image: -webkit-gradient(linear, right top, right bottom, from(transparent), color-stop(45%, #94c4fe;), to(rgba(0, 0, 0, 0.9))); 
  background: inherit;
  transform: scaleY(-1);
  filter:blur(0px); 
  -webkit-filter: blur(0px);
   
}

.shine { 
  width: 100px;
  height: 25px;
  margin: 10px auto;
  position: relative; 
  transform: scaleY(-1); 
  border: none;
	-webkit-border-radius: 7em;
	-moz-border-radius: 7em;
	border-radius: 7em;
  color: #000;
  font-size: 0.750em;
  text-shadow: 1px 1px 0px rgba(255,255,255,.5);
  -webkit-box-shadow:  0px 1px 3px 0px rgba(240,248,255, .2);   
    box-shadow:  0px 1px 3px 0px rgba(240,248,255, .2);
  webkit-transition: 0.4s; /* Animation */
    transition:  0.4s; /* Animation */
    transition:  all 0.4s ease-in-out;
    top:30px;
    left:0px;
}
 
.shine:before {
  content: ""; 
  width: 90px;
  height: 16px; 
  display: block;
  position: absolute;
  left: 5px; 
  border: none;
	-webkit-border-radius: 7em;
	-moz-border-radius: 7em;
	border-radius: 7em;
  background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0.7) 8%, rgba(255,255,255,0) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(8%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0)));
  background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 8%,rgba(255,255,255,0) 100%);
  background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 8%,rgba(255,255,255,0) 100%);
  background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 8%,rgba(255,255,255,0) 100%);
  background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 8%,rgba(255,255,255,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
  webkit-transition: 0.4s; /* Animation */
    transition:  0.4s; /* Animation */
    transition:  all 0.4s ease-in-out;
}

.shine:hover { 
  
    width: 125px;
    position:relative;
    top:30px;
    left:0px;
    border: none;
	-webkit-border-radius: 7em;
	-moz-border-radius: 7em;
	border-radius: 7em;
} 

.shine:hover:before {
  content: ""; 
  width: 115px;
  display: block; 
  position: absolute;
  left: 5px;
  border: none;
	-webkit-border-radius: 7em;
	-moz-border-radius: 7em;
	border-radius: 7em;
  background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0.7) 8%, rgba(255,255,255,0) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(8%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0)));
  background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 8%,rgba(255,255,255,0) 100%);
  background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 8%,rgba(255,255,255,0) 100%);
  background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 8%,rgba(255,255,255,0) 100%);
  background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 8%,rgba(255,255,255,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
   
}

.shine:active { 

  width:90px;
  position:relative;
  left: -18px;

}

.newbutton:before {
  z-index: 1; 
  background: #94c4fe;
  background: linear-gradient(to top, #94c4fe 31%,#d3f6fe 100%);
}

.newbutton:active {  

transform: scaleX(0.65); 

}

.newbutton:before {
  content: "";
  width: 90px; 
  height: 16px; 
  display: block; 
  position: absolute;
  top:0px;
  left: 5px;
  border: none;
	-webkit-border-radius: 7em;
	-moz-border-radius: 7em;
	border-radius: 7em;
  background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0.7) 8%, rgba(255,255,255,0) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(8%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0)));
  background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 8%,rgba(255,255,255,0) 100%);
  background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 8%,rgba(255,255,255,0) 100%);
  background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 8%,rgba(255,255,255,0) 100%);
  background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 8%,rgba(255,255,255,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
  webkit-transition: 0.4s; /* Animation */
    transition:  0.4s; /* Animation */
    transition:  all 0.4s ease-in-out;
} 

.newbutton:hover:before {
  content: ""; 
  width: 115px;
  display: block;
  position: absolute;
  left: 5px;
  border: none;
	-webkit-border-radius: 7em;
	-moz-border-radius: 7em;
	border-radius: 7em;
  background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0.7) 8%, rgba(255,255,255,0) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(8%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0)));
  background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 8%,rgba(255,255,255,0) 100%);
  background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 8%,rgba(255,255,255,0) 100%);
  background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 8%,rgba(255,255,255,0) 100%);
  background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.7) 8%,rgba(255,255,255,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
   
}

.newbutton:active { 

transform: scaleX(0.65);

}

.newbutton:hover {
  position: relative;
  top:80px;
  left:-300px;
  background: #94c4fe;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(31%,#94c4fe), color-stop(100%,#d3f6fe));
  background: -webkit-linear-gradient(top,  #94c4fe 31%,#d3f6fe 100%); 
  background: -moz-linear-gradient(top,  #94c4fe 31%, #d3f6fe 100%);
  background: -o-linear-gradient(top,  #94c4fe 31%,#d3f6fe 100%);
  background: -ms-linear-gradient(top,  #94c4fe 31%,#d3f6fe 100%);
  background: linear-gradient(to bottom,  #94c4fe 31%,#d3f6fe 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94c4fe', endColorstr='#d3f6fe',GradientType=0 ); 
    width: 125px; 
    border: none;
	-webkit-border-radius: 7em;
	-moz-border-radius: 7em;
	border-radius: 7em;
}

And the HTML

<div class="newbutton">
<div class="shine"></div>
</div>

Thanks. Note: the .shine class is the :before pseudo class I added to the button which does not have it by default. This happened when I made the button upside down apparently. Really weird.

2

It does for me in a Codepen.

image
image1090×268 29.3 KB

(Yellow dot indicates i’m forcing a hover on the newbutton)
Though for some reason your code generates two ‘button’ images for me…

2 Likes
3

I can’t really work out what you want but I’m guessing you want it all to happen at the same time when you hover so you probably should be using the hover on newbutton to change the shine elements and not when you hover on the shine element.

e.g.

.newbutton:hover .shine:before {

instead of:

.shine:hover:before {

I’m not sure if that was the issue you were looking at though?

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.