Skip to content

Instantly share code, notes, and snippets.

@jonasermert

jonasermert/hover-button-animation-with-transition-2.markdown

Created October 29, 2021 22:58
Show Gist options
  • Save jonasermert/d3341c0f85aba85069d4fdc7c230b3d1 to your computer and use it in GitHub Desktop.
Save jonasermert/d3341c0f85aba85069d4fdc7c230b3d1 to your computer and use it in GitHub Desktop.
Download ZIP
hover button animation with transition #2
Raw
index.html
<a id="btn" href="#">hover me!</a>
Raw
style.css
*{padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
}
body{
height: 20vh;
padding: 200px;
}
#btn{
border: 2px solid black;
padding: 30px 60px;
color: black;
cursor: pointer;
position: relative;
overflow: hidden;
font-size: 24px;
font-family: sans-serif;
transition: all .5s;
}
#btn:before{
width: 100%;
height: 100%;
content: '';
margin: auto;
position: absolute;
top: -100%;
left: -100%;
background: #212121;
transition: all .5s;
z-index: -1;
}
/**#btn:after{
width: 100%;
height: 100%;
content: '';
margin: auto;
position: absolute;
top: 100%;
left: 100%;
background: #212121;
transition: all .5s;
z-index: -1;
}**/
#btn:hover{
color: white;
}
#btn:hover:before{
top: 0;
left: 0;
}/**
#btn:hover:after{
transform: rotateY(90deg);
}**/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment