CSS3 introduced some effects like text-shadow, border-radius, background gradient without using images. In this post we will create simple CSS3 button having all these effects.
HTML Part
<a href="#" title="" class="button">Click Me</a>
CSS Part
/* Styling button */
a.button{
color:white;
padding:5px 20px;
text-shadow:1px 1px 0 #145982;
font-family:Arial,Helvetica,sans-serif;
font-size:15px;
font-weight:bold;
text-align:center;
border:1px solid #60b4e5;
margin:50px auto;
float:left;
clear:both;
/*
CSS3 gradients for webkit and mozilla browsers fallback color for the rest:
*/
background-color: #59aada;
background-image: -moz-linear-gradient(#F902B6, #FFA4E6);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F902B6), to(#FFA4E6));
box-shadow:3px 3px 3px #000000;
-moz-box-shadow:3px 3px 3px #000000;
-webkit-box-shadow:3px 3px 3px #000000;
border:1px solid #F902B6;
border-radius:6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
}
a.button:hover{
/* Lighter gradients for the hover effect */
text-decoration:none;
background-color: #F902B6;
background-image: -moz-linear-gradient(#6bbbe9, #57a5d4);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6bbbe9), to(#57a5d4));
box-shadow:3px 3px 3px #333;
-moz-box-shadow:3px 3px 3px #333;
-webkit-box-shadow:3px 3px 3px #333;
}
Final Complete Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS3 Butons</title>
<style type="text/css">
/* Styling button */
a.button{
color:white;
padding:5px 20px;
text-shadow:1px 1px 0 #145982;
font-family:Arial,Helvetica,sans-serif;
font-size:15px;
font-weight:bold;
text-align:center;
border:1px solid #60b4e5;
margin:50px auto;
float:left;
clear:both;
/*
CSS3 gradients for webkit and mozilla browsers fallback color for the rest:
*/
background-color: #59aada;
background-image: -moz-linear-gradient(#F902B6, #FFA4E6);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F902B6), to(#FFA4E6));
box-shadow:3px 3px 3px #000000;
-moz-box-shadow:3px 3px 3px #000000;
-webkit-box-shadow:3px 3px 3px #000000;
border:1px solid #F902B6;
border-radius:6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
}
a.button:hover{
/* Lighter gradients for the hover effect */
text-decoration:none;
background-color: #F902B6;
background-image: -moz-linear-gradient(#6bbbe9, #57a5d4);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6bbbe9), to(#57a5d4));
box-shadow:3px 3px 3px #333;
-moz-box-shadow:3px 3px 3px #333;
-webkit-box-shadow:3px 3px 3px #333;
}
</style>
</head>
<body>
<a href="#" title="" class="button">Click Me</a><br />
</body>
</html>
Thanks, a demo would be good though!
How do I make a onclick-state? I need too Google some more..
Waaaaaaa!!! Cute buttons! I will definitely steal part of this code to my blog ^^. Off the point, I like text-shadow on content itself – it looks nice, though I’m not sure if it is user-friendly (it is not very comfortable for reading)
Dude wish you had added the DEMO for this tutorial! I mean keep them bit illustrative would be better for us!
thanks. enjoyed the post .. here is another usefull stuff
All about html5, templates,news,apps everything here.