If you like it this simple shadow text with css with webkit filter then today I will show you how to make one simple shadow button.
Is a basic html5 with css style and show with class button.
<!DOCTYPE html>
<html>
<head>
<style>
.button{
color: #555;
text-shadow: 0px 1px 0px #fff;
display:block; padding: 5px;
text-decoration:none;text-align: center;
font-size: 14px;
font-weight: bold;
border: 1px solid #888;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;

background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(194,194,195)),
color-stop(0.8, rgb(200,200,200)),
color-stop(1, rgb(250,250,250))
);

background-image: -moz-linear-gradient(
center bottom,
rgb(194,194,195) 0%,
rgb(200,200,200) 80%,
rgb(250,250,250) 100%
);
}
.button:hover{
box-shadow: 0px 0px 20px #30ff00;
-moz-box-shadow: 0px 0px 20px #30ff00;
-webkit-box-shadow: 0px 0px 20px #30ff00;
}
</style>
<meta charset=”UTF-8″>
<title>shadow button</title>
</head>

<body>
<p><a href=”” class=”button”>Shadow buttton effect</a></p>
</body>

</html>

 

 

Shadow buttton effect

 

 

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.