Skip to content

Instantly share code, notes, and snippets.



Last active Dec 22, 2020
What would you like to do?
position: relative;
z-index: 1;
overflow: hidden;
width: 200px;
height: 50px;
background: transparent;
border: 2px solid red;
border-radius: 0.325rem;
color: #fff;
font-size: 18px;
font-weight: 600;
transition: color .35s;
display: inline-block;
content: "";
position: absolute;
z-index: 2;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
background: red;
transition: transform .25s;
transform: scale(0, 1);
transform-origin: 50% 0%; # thats do the trick!
position: relative;
z-index: 2;
color: red;
transition: color 0.35s;
transform: scale(1, 1);
<!--,css,output -->
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<a href="" class="button"><span class="button-text"></span></a>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment