Add Stylish CSS3 Read More Button in Blogger

In this post I will show you how to replace your default read more link with stylish CSS3 button. Let's start.

Procedure to Add Stylish CSS3 button in Blogger:

(1) Go to Blogger Dashboard >> Template >> Edit HTML
[ Please backup your template before doing any changes, if you want restore the previous mode ]

(2) Then search for ]]></b:skin> with Ctrl+F.

(3) paste the following Code just Above ]]></b:skin>


.jump-link { display: block; font-size: 12px; font-weight: bold; text-align:right; } .jump-link a { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff; padding: 6px 15px; background: -moz-linear-gradient( top, #42aaff 0%, #003366); background: -webkit-gradient( linear, left top, left bottom, from(#42aaff), to(#003366)); -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; border: 1px solid #003366; -moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.5); -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.5); box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.5); text-shadow: 0px -1px 0px rgba(000,000,000,0.7), 0px 1px 0px rgba(255,255,255,0.3); }

       Button Design


            stylish css3 readmore button  

(4) Now Preview Template. If it works them Save Template & you are done.

Customization: The Above CSS3 Code is for Blue Color Button. If you want to use Gray Color Button then Paste the following code just above  ]]></b:skin>

.jump-link { display: block; font-size: 12px; font-weight: bold; text-align:right; } .jump-link a { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; padding: 6px 15px; background: -moz-linear-gradient( top, #ffffff 0%, #b5b5b5); background: -webkit-gradient( linear, left top, left bottom, from(#ffffff), to(#b5b5b5)); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 3px solid #0088ff; -moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 3px rgba(255,255,255,1); -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 3px rgba(255,255,255,1); box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 3px rgba(255,255,255,1); text-shadow: 0px 1px 2px rgba(000,000,000,0.5), 0px 1px 2px rgba(252,254,255,0.9); }

                                                                 Button Design


            stylish css3 readmore button for blogger

             [Do not forget to subscribe this blog & feel free to communicate in case of any problem]

Previous
Next Post »

1 comments:

Write comments
Bella
AUTHOR
October 4, 2018 at 6:27 PM delete

All really great and very informative.

Reply
avatar