Ravi Saive: A Technology Blog For Newbies

When it comes to website optimization and speed up load time. Then you are at right place. In this tutorial I will explain and share some of buttons which have created using CSS like Read More buttons. I Will show you how to use them to create beautiful CSS Buttons for you website. So Lets Start Creating CSS Buttons.

How to Create Read More Buttons With CSS

/*-------------- Read More Button CSS-----------------*/

    .Buttons{
    background:#0080ff;
    text-align:right;
    cursor:pointer;
    color:#Fff;
    margin:5px 0;
    float:right;
    border:2px solid #ddd;
    padding:5px;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    font:bold 11px sans-serif;
    }
    .Buttons:hover{
    background:#fff;
    font:bold 11px sans-serif;
    color:#0080ff;
    border:3px dotted #ddd;
    }
    .Buttons a {
    color:#fff;
    text-decoration:none;
    }

    .Buttons a:hover {
    color:#0080ff;
    text-decoration:none;
    }

Just Replace # with the your link URL and Read More with your text.

<span class="Buttons"><a href="#">Read More</a></span>

Demo Button:

Customize The Button Styles With Css

To change the feel and look of the buttons then kindly make below changes the way you want Button Look.

• To Change background color of button, border and font colors in Active Mode just replace above marked Red colors with your favorite colors
  
• To Change background color of button, border and font colors when mouse over just replace above marked Blue colors with your favorite colors
  
• To change the link color then change above marked purple color with your favorite color
  
• To change the link color when mouse over then change above marked purple color with your favorite color

If you face any problem while customizing buttons, Please leave a comment below will reply you soon.