Jul 11, 2011
How to Create Read More Buttons With CSS
Jul 11, 2011 by Ravi Saive
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.
About : Ravi Saive

Simple Word a Computer Geek and Linux Guru who loves to share tricks and tips on Internet. Most Of My Servers runs on Open Source Platform called Linux. Because it is usually free and allow me do geeky stuff such as Programming and Scripting with CLI (Command Line Interface).
Subscribe to:
Post Comments (Atom)
1 Responses to “How to Create Read More Buttons With CSS”
June 1, 2012 at 2:05 AM
thanks
Post a Comment