Fading / Blinking rounded corner button only with pure css(without image) | Coding Cluster - using asp.net, c#, mvc 4, iphone, php, ios, javascript, in asp.net mvc 3 & more
 

Fading / Blinking rounded corner button only with pure css(without image)

Wednesday

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.

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:

0 comments:

Post a Comment

Share your thoughts here...

 
 
 

RECENT POSTS

Boost

 
Blogger Widgets