Skip to content

Instantly share code, notes, and snippets.

@tlindig

tlindig/index.html

Created May 4, 2020 22:08
Show Gist options
  • Save tlindig/5260467074b113861386acb4de9d31d1 to your computer and use it in GitHub Desktop.
Save tlindig/5260467074b113861386acb4de9d31d1 to your computer and use it in GitHub Desktop.
Download ZIP
Button slide Background animation // source https://jsbin.com/zetaxuq
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Button slide Background animation</title>
<style id="jsbin-css">
.button {
padding: 20px;
border: 1px solid currentcolor;
display: inline-block;
}
.slide-hover {
background: linear-gradient(to right, currentColor 50%, #ffffff 50%);
background-size: 200% 100%;
background-position-x: 100%;
transition: background-position-x 0.5s, color 0.5s;
}
.slide-hover:hover {
background-position-x: 0%;
cursor: pointer;
}
.slide-hover:hover .text {
color: #fff;
}
</style>
</head>
<body>
<div class="button slide-hover"><span class="text">button</span></div>
<script id="jsbin-source-css" type="text/css">.button {
padding: 20px;
border: 1px solid currentcolor;
display: inline-block;
}
.slide-hover {
background: linear-gradient(to right, currentColor 50%, #fff 50%);
background-size: 200% 100%;
background-position-x: 100%;
transition: background-position-x .5s, color .5s;
&:hover {
background-position-x: 0%;
cursor: pointer;
.text {
color: #fff;
}
}
}</script>
</body>
</html>
Raw
jsbin.zetaxuq.css
.button {
padding: 20px;
border: 1px solid currentcolor;
display: inline-block;
}
.slide-hover {
background: linear-gradient(to right, currentColor 50%, #ffffff 50%);
background-size: 200% 100%;
background-position-x: 100%;
transition: background-position-x 0.5s, color 0.5s;
}
.slide-hover:hover {
background-position-x: 0%;
cursor: pointer;
}
.slide-hover:hover .text {
color: #fff;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment