Thursday 24 July 2014

How To Create A Stylish Button Using HTML And CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
/* Giving the <p> class some css style so that it can looks like button */
.btn
{
    position:absolute;
    float:none;
    width:120px;
    height:30px;
    background-color:#00FFFF;
    border:1px solid #00C;
    box-shadow: inset 1px 1px 10px #0000CC;
    -moz-box-shadow: inset 1px 1px 10px #0000CC;
    -webkit-box-shadow: inset 1px 1px 10px #0000CC;
    cursor:pointer;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    alignment-adjust:middle;
    left: 297px;
    top: 313px;
     
}
/* Styling the link of the button*/
.btn a
{
    text-decoration:none;
    color:#333333;
    text-shadow:1px 1px 10px #FFFFFF;
    position:absolute;
    left: 26px;
    top: 7px;
}
/*Styling the link in hover state*/
.btn:hover a
{
    color:#FFFFFF;
    text-shadow:1px 1px 10px #000099;
}
</style>
</head>
 
<body>
<p class="btn" align="center"><a href="#">Click Here</a></p>
</body>
</html>

No comments:

Post a Comment