Skip to content

Instantly share code, notes, and snippets.

@BenLumenDigital

BenLumenDigital/button.html

Created November 8, 2022 15:06
Show Gist options
  • Save BenLumenDigital/e0cb4c44836c0b8193730c18c04f9e5d to your computer and use it in GitHub Desktop.
Save BenLumenDigital/e0cb4c44836c0b8193730c18c04f9e5d to your computer and use it in GitHub Desktop.
Download ZIP
CSS Gloss Button
Raw
button.html
<html>
<style>
body {
margin: 20px;
background: #1e1e1e;
font-family: "SF Pro Display",-apple-system,BlinkMacSystemFont;
}
#flex_center {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.button {
display: inline-flex;
padding: 16px 48px;
color: #fefefe;
font-size: 24px;
border-radius: 48px;
border: 2px rgba(244,244,244, 0) solid;
background: linear-gradient(95deg, rgb(41, 96, 195) 9.16%, rgb(41, 96, 235) 64.72%);
}
.gloss {
margin: -2px;
padding: 2px 2px;
border-radius: 50px;
display: inline-flex;
font-size: 24px;
background: linear-gradient(130deg, rgba(0,0,0,0) 48%, #ffffff 50%, rgba(0,0,0,0) 52%);
background-size: 200% 200%;
-webkit-animation: Animation 5s ease infinite;
-moz-animation: Animation 5s ease infinite;
animation: Animation 5s ease infinite;
}
@-webkit-keyframes Animation {
0%{background-position:10% 0%}
50%{background-position:91% 100%}
100%{background-position:10% 0%}
}
@-moz-keyframes Animation {
0%{background-position:10% 0%}
50%{background-position:91% 100%}
100%{background-position:10% 0%}
}
@keyframes Animation {
0%{background-position:10% 0%}
50%{background-position:91% 100%}
100%{background-position:10% 0%}
}
</style>
<div id='flex_center'>
<div class='gloss'>
<div class='button'>This is a Button</div>
</div>
</div>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment