buttons
Posted in
6076
6:32 am, September 15, 2021
Shiny Button Animation
This makes your button flash a bit to bring some attention to it. Runs an animation with overflow set to hidden on the button to achieve this.
You can play around with the background on the :before element to tone the effect down a bit if you want something a bit more subtle.
Mmm... shiny.
Shiny Button Animation Demo
View Demo Full Screen View Demo New Tab
Shiny Button Animation Code
HTML
<div class='my-button shiny-button'>
<a href='#!'>Click This Shiny Button</a>
</div>
<p>is it shiny or shiney (i probably should google that...) i think its shiny.</p>
CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap');
* {
font-family:"Poppins", sans-serif;
}
.my-button {
padding:50px 0;
text-align:center;
}
.my-button a {
font-family: "Poppins", "Open Sans", sans-serif;
padding: 15px 30px;
font-weight: bold;
border-radius: 5px;
text-decoration: none;
text-align: center;
text-transform: none;
transition: all 0.3s;
display: inline-block;
background: #e83232;
color: #FFF;
box-shadow: 0px 1px 20px #00000061;
}
/* shiny Button */
.shiny-button a {
position:relative;
overflow:hidden;
}
.shiny-button a:before {
position: absolute;
content: '';
display: inline-block;
top: -180px;
left: 0;
width: 30px;
height: 100%;
background-color: rgba(255,255,255,0.5);
animation: shiny-button 3s ease-in-out infinite;
}
@-webkit-keyframes shiny-button {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
/* shiny Button */
Add Comment
Other Items in buttons
Related Search Terms
Other Categories in Code
404 pages animation animations background effects boxes buttons css css & javascript css animation css animations css backgrounds css cursors css framework css frameworks css modal css positions css reset css shadows css slider css text effects css text formatting css tips css tools css z-index content slider cookie alerts design html css sections html canvas html sections icons image zoom interactive images lightbox link effects loading animation modals mouse effects navigation notifications parallax profiles quick css seo sections text ui web developer checklists animations backgrounds bootstrap buttons css css animated css animations css framework css grid footers forms html image effects images javascript scroll effects sections show your work svg text animation timeline
css animations
css animations
HTML Canvas
javascript