Css only Rounded corners Opacity Gradient buttons:
This is the source code for, No JavaScript, No Images, No Flash - CSS Only! Blinking round corner button.
Demo:
This is the source code for, No JavaScript, No Images, No Flash - CSS Only! Blinking round corner button.
source code for css only rounded corner fade button
<html><head> <style> nav a#blink { padding: 10px 10px; margin-right: 10px; margin-bottom: 5px; border-radius:20px; display: inline-block; color: #421f00; background-color:#e6a560; background: -moz-linear-gradient( top, #e6a560 0%, #ca6609); background: -o-linear-gradient( top, #e6a560 0%, #ca6609); background: -webkit-gradient( linear, left top, left bottom, from(#e6a560), to(#ca6609)); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e6a560', endColorstr='#ca6609'); border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #ffd5ab; -moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(66,31,0,0.7); -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(66,31,0,0.7); text-shadow: 0px -1px 0px rgba(171,87,13,0.4), 0px 1px 0px rgba(255,255,255,0.3); opacity:0.7; -webkit-animation-name: buttonPulse; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; } @-webkit-keyframes buttonPulse { 0% { opacity: 0.5 } 50% { opacity: 1 } 100% { opacity: 0.5 } } </style> </head> <body> <nav role="navigation"> <a href="http://codingcluster.blogspot.in/2012/10/fadeblinking-rounded-corner-button-only.html" id="blink">Hay Look at my skin</a> </nav> </body> </html>
Demo:
Posts
0 comments:
Post a Comment
Share your thoughts here...