Make a simple rounded button with CSS

Minimizing the image usage on our web page is to reduce our page size and become easily to load. Usually, we are using an image as a fancy button. Now, with CSS3 new features, we can reduce images on our pages.

Example:

I'm a button

HTML code:


<a href="#" class="mybutton" title"I am a button">I'm a button</a>

CSS code:

 .mybutton  {
    border-right:1px solid #25839a;
    border-bottom:1px solid #25839a;
    padding:0px 16px;
    color:#fff;
    font-size:18px;
    line-height:38px;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    background:#ff6117;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    text-decoration:none;

Hover code (Optional) :

 .mybutton:hover  {
    background:#6d777e;
    border-right:1px solid #6d777e;
    border-bottom:1px solid #6d777e;
    }

Write by Arafa Daming