TUTORIALS FOR CREATING DYNAMIC CSS ROUNDED CORNERS BUTTONS

In school time we have been creating round corners web buttons using the old method by saving them as an image, then you probably should check out these enhanced. No in modern style we can do fast and easy way of creating round corner web buttons using Cascading Style Sheet,(CSS).
If you are a web developer or designer and still have not try using CSS to create your corner button, you probably might be living in a well. It’s time to jump out of the well now, and explore into the endless possibilities with CSS3 to create nice website.
I have written the tutorial which supports rounded corner with the major browser ie9,chrom,safari,firefox,opera.
Create the HTML Page like the below and run it to the browser. The output of this page will look likes the below rounded corner button.

 

rounded

 

<html>
<head>

<title>Rounded Corner Button</title>

<style>

.box
{
width:400px;
margin:auto;
height:400px;
}
.start
{
font-size: 26px;
width: 247px;
padding: .45em 0;
}

.button
{
cursor: pointer;
font: bold 19px “Helvetica”, “Arial”, sans-serif;
color: #fff;
background-color: #333;
display: inline-block;
padding: .6em 1em .5em 1em;
border: 1px solid #000;
border-top-color: #000;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-decoration: none;
}

.button.red
{
border: 1px solid #c40543;
border-top-color: #c60b48;
color: #fff;
background-color: #F32C68;
background-image: linear-gradient(bottom, #e7094f 9%, #fd669b 99%, #fea8c8 100%);
background-image: -o-linear-gradient(bottom, #e7094f 9%, #fd669b 99%, #fea8c8 100%);
background-image: -moz-linear-gradient(bottom, #e7094f 9%, #fd669b 99%, #fea8c8 100%);
background-image: -webkit-linear-gradient(bottom, #e7094f 9%, #fd669b 99%, #fea8c8 100%);
background-image: -ms-linear-gradient(bottom, #e7094f 9%, #fd669b 99%, #fea8c8 100%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.09, #e7094f), color-stop(0.98, #fd669b), color-stop(0.99, #fea8c8));
}

.button.red:hover {
background-color: #DB3569;
background-image: linear-gradient(bottom, #c30a48 0%, #e95888 98%, #f3a1bc 99%);
background-image: -o-linear-gradient(bottom, #c30a48 0%, #e95888 98%, #f3a1bc 99%);
background-image: -moz-linear-gradient(bottom, #c30a48 0%, #e95888 98%, #f3a1bc 99%);
background-image: -webkit-linear-gradient(bottom, #c30a48 0%, #e95888 98%, #f3a1bc 99%);
background-image: -ms-linear-gradient(bottom, #c30a48 0%, #e95888 98%, #f3a1bc 99%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #c30a48), color-stop(0.98, #e95888), color-stop(0.99, #f3a1bc));
}

</style>
</head>

<body style=”background-color: #006699;”>

<div class=”title”>
<a class=”button red start” href=”https://www.blogger.com/blogger.g?blogID=6406011370237664050#”>Rounded Corner Button</a>
</div>
</body>
</html>

See Related Articles..

10 Excellent Online Color Tool For Web Designers

Leave a Reply

Your email address will not be published. Required fields are marked *