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: