Pure CSS animated lens flare button
Button with animated flare to increase conversion on pure CSS.
Flare button option 1.
Yellow button with animated lens flare.
<STYLE>
.preview-block__btn {
max-width: 350px;
margin-top: 35px;
}
.custom-btn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 58px;
padding-top: 2px;
border: none;
border-bottom: 2px solid #beb038;
position: relative;
font-size: 15px;
font-weight: bold;
color: #000;
text-align: center;
text-transform: uppercase;
cursor: pointer;
overflow: hidden;
background: #f3d429;
-webkit-transition: ease 0.3s;
transition: ease 0.3s;
}
.custom-btn:after {
content: '';
display: block;
width: 30px;
height: 300px;
margin-left: 60px;
background: #fff;
background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0.7) 100%);
background: -webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0.7) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0.7) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3ffffff', endColorstr='#b3ffffff',GradientType=0 );
position: absolute;
left: -40px;
top: -150px;
z-index: 1;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.1s;
transition: all 0.1s;
-webkit-animation-name: slideme;
animation-name: slideme;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-delay: 0.05s;
animation-delay: 0.05s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@-webkit-keyframes slideme {
0% { left: -30px; margin-left: 0px; }
30% { left: 110%; margin-left: 80px; }
100% { left: 110%; margin-left: 80px; }
}
</STYLE>
<DIV>
<CENTER><a href='#' class='preview-block__btn custom-btn'><span>Glare Button</span></a></CENTER>
</DIV>
Flare button option 2.
Three buttons with animated glare. Flare on mouse over.
<STYLE>
.icon {
position: relative;
overflow: hidden;
width: 50px;
height: 50px;
display: inline-block;
margin: 25px 0 25px 25px;
border-radius: 5px;
color: #fff;
text-decoration: none;
text-align: center;
line-height: 50px;
font-size: 12px;
font-family: sans-serif;
}
.icon:nth-child(1) {
background: cornflowerblue;
}
.icon:nth-child(2) {
background: salmon;
}
.icon:nth-child(3) {
background: gray;
}
/**
* The "shine" element
*/
.icon:after {
content: "";
height: 200%;
left: -230%;
opacity: 0;
position: absolute;
top: -20%;
transform: rotate(-30deg);
width: 200%;
background: rgba(255, 255, 255, 0.13);
background: linear-gradient(to right, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.13) 77%, rgba(255, 255, 255, 0.5) 92%, rgba(255, 255, 255, 0.0) 100%);
}
/* Hover state - trigger effect */
.icon:hover:after {
left: -50%;
opacity: 1;
top: -50%;
transition-duration: 0.7s, 0.7s, 0.15s;
transition-property: left, top, opacity;
transition-timing-function: ease;
}
/* Active state */
.icon:active:after {
opacity: 0;
}
</STYLE>
<P><CENTER>
<a href="#" class="icon">let</a>
<a href="#" class="icon">it</a>
<a href="#" class="icon">shine</a>
</CENTER></P>
Flare button option 3.
Gray animated button with lens flare. Mouse over effect.
<STYLE>
a.button {
width: 200px;
height: 50px;
background: #333;
display: block;
position: relative;
margin: 50px auto 0;
overflow: hidden;
border: 1px solid #333333;
color: white;
text-decoration: none;
-webkit-box-shadow: inset 0px 1px 1px 0px rgba(255,255,255,.4);
-moz-box-shadow: inset 0px 1px 1px 0px rgba(255,255,255,.4);
box-shadow: inset 0px 1px 1px 0px rgba(255,255,255,.4);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
background-image: -webkit-linear-gradient(bottom, #383838 0%, #444444 49%, #555 50%, #555 100%);
background-image: -moz-linear-gradient(bottom, #383838 0%, #444444 49%, #555 50%, #555 100%);
background-image: -ms-linear-gradient(bottom, #383838 0%, #444444 49%, #555 50%, #555 100%);
background-image: -o-linear-gradient(bottom, #383838 0%, #444444 49%, #555 50%, #555 100%);
background-image: linear-gradient(bottom, #383838 0%, #444444 49%, #555 50%, #555 100%);
}
a.button span.text {
position: absolute;
top: 22px;
left: 65px;
font: 15px Arial;
}
a.button span.shine {
content: "";
position: absolute;
height: 400px;
width: 20px;
background: white;
top: -80px;
left: -20px;
display: block;
opacity: 0.8;
-webkit-box-shadow: 0px 0px 20px 10px white;
-moz-box-shadow: 0px 0px 20px 10px white;
box-shadow: 0px 0px 20px 10px white;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
a.button:hover {
-webkit-box-shadow: inset 0px 1px 10px 0px rgba(255,255,255,.4), 0px 3px 3px 0px rgba(0,0,0,0.4);
-moz-box-shadow: inset 0px 1px 10px 0px rgba(255,255,255,.4), 0px 3px 3px 0px rgba(0,0,0,0.4);
box-shadow: inset 0px 1px 10px 0px rgba(255,255,255,.4), 0px 3px 3px 0px rgba(0,0,0,0.4);
}
a.button:active {
-webkit-box-shadow: inset 0px 1px 15px 0px rgba(0,0,0,.4), inset 0px 1px 1px 1px rgba(0,0,0,.2), 0px 1px 1px 0 rgba(255,255,255,.5);
-moz-box-shadow: inset 0px 1px 15px 0px rgba(0,0,0,.4), inset 0px 1px 1px 1px rgba(0,0,0,.2), 0px 1px 1px 0 rgba(255,255,255,.5);
box-shadow: inset 0px 1px 15px 0px rgba(0,0,0,.4), inset 0px 1px 1px 1px rgba(0,0,0,.2), 0px 1px 1px 0 rgba(255,255,255,.5);
}
a.button:hover span.shine {
left: 170px;
top: -300px;
}
</STYLE>
<P><CENTER>
<a href="#" class="button">
<span class="shine"></span>
<span class="text">SPAGE.ME</span>
</a>
</CENTER></P>
Categories: