Menu
My CSS transition suddenly stops as shown in the following image
This only happens on Chrome, on Firefox everything works normally, other than that I cannot test.
The interesting thing is not only that the transition stops for no reason, but is that once I right-click on a button with this class, it works normally for the rest of the browsing session.
The following image is what the button looks like when the working transition ends:
HTML and CSS code
.main-link{
position: relative;
display: block;
overflow: hidden;
width: 200px;
height: auto;
color: #FFF;
text-align: center;
text-decoration: none;
border: 2px solid #53c1f8;
}
.main-link::after {
position: absolute;
overflow: none;
content: "";
background: #53c1f8;
left: 50%;
top: 50%;
height: 0%;
width: 100%;
z-index: -1;
transition: 0.75s ease-in-out;
transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.main-link:hover::after {
height: 15em;
}<body>
<div id='main'>
<div id='content'>
<div id='main-image'>
<div id='main-image-intro'>
<ul id='main-image-cto'>
<li>
<a href='subscribe.html' class='main-link'> GET STARTED </a>
</li>
<li>
<a href='subscribe.html' class='main-link'> GIFT IT </a>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>Tested under Ubuntu 15.10:
765
Edit: I completely changed my answer. Think this should work in any modern browser and be a more save option.
a.button {
color: black;
height: 50px;
width: 200px;
border: 2px solid black;
padding: 10px 30px;
text-decoration: none;
font-family: Helvetica;
position: relative;
display: inline-block;
line-height: 50px;
text-align: center;
transition: color 0.2s ease-out;
overflow: hidden;
}
a.button:after {
position: absolute;
content: '';
background-color: black;
height: 100%;
width: 1px;
left: 65%;
top: 0;
z-index: -1;
transition: transform 0.4s ease-out;
transform: skew(45deg) scale(0,1);
margin-left: -20%;
}
a.button:hover {
color: white;
}
a.button:hover:after {
width: 1px;
background-color: black;
transform: skew(45deg) scale(400, 1);
}<a class="button" href="">Button</a>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
