Give a glossy look to buttons (pure css3)

{ Published by Anirudh - On Friday, July 22, 2011 - 0 }


Give a glossy look to buttons (pure css3)

Using CSS3 and a little background gradient know how you can give liitle bit of metallic shine to your buttons .




CSS3 - multiple gradient and text-shadows

In this tutorial we will see how multiple gradients color-stop can give a metallic and shining look.







BASIC HTML


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>css multiple text gradient</title>
<link rel="stylesheet" href="style1.css" />
</head>
<body>
<div id="container">
<h2>continue</h2>
</div>
</body>
</html>


CSS

body {
background: #fff ;
color: #F0F0F0 ;
}

h2 {
font-size: 70px;
line-height: 95px;
font-family: sans-serif;

text-align: center;
text-shadow: 1px 1px 1px #666666,-1px -1px 1px #666666;
}
#container {

background: -webkit-gradient(
linear, left top, left bottom,
color-stop(50%,#666666),
color-stop(51%,#4f4f4f),
color-stop(52%,#454545),
color-stop(100%,#B8B8B8));
height: 100px;
width: 500px;
margin: 100px auto;
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, .3);
-webkit-border-radius: 50px;

}