The Default Blogger Read More Link is very simple and looks ugly. So I thought why not design some "stylish read more buttons" with "css" which won't affect the loading time of your blog but still add a designer touch to your blog. Adding these buttons to blogger blog is damn easy! You even don't need to edit the HTML version of your blog. You can easily "customize Read More link" to a stylish button by adding simple Css code to blogger template.
Features Of These Read More Buttons:
~Created using Css only.
~No Images are used.
~Very Light-weight Code.
~Won't effect the loading time of your blog.
How To Add This 3d Read More Button In Blogger:
Adding one of these Read More buttons to blogger blog is very easy. Just Follow given below steps:
Step 1: Login to blogger dashboard and select your blog.
Step 2: Select Template option.
Step 3: Click on Customize button.
Step 4: Select Advanced option from the list.
Step 5: Select Add CSS option from the list(the last option in list).
Step 6: Paste one of following codes in the Css text area and click on Apply To Blog button.
Preview Of Button
Code For Button
.jump-link a {
padding: 10px 15px;
text-shadow:0px 1px 1px white;;
height:20px;
position:relative;
font-weight:bold;
box-shadow:1px 3px 1px grey;
background: #ffcccc;
background: linear-gradient(#ffe0e0, #ffcccc);
background: -moz-linear-gradient(#ffe0e0 , #ffcccc );
background: -webkit-linear-gradient(#ffe0e0 , #ffcccc );
background: -o-linear-gradient(#ffe0e0 , #ffcccc );
font-family: verdana,georgia,sans-serif;
color:#E65C5C;
border-top-left-radius:30px;
border-bottom-right-radius:30px;
border-top-right-radius:6px;
border-bottom-left-radius:6px;
border-bottom:5px solid #E65C5C;
border-top:none;
border-left:none;
border-right:none;
}
.jump-link a:hover {
background: #ffe0e0;
text-decoration: none;
}
Preview Of Button
Code For Button
.jump-link a {padding: 10px 15px;text-shadow:0px 1px 1px white;;height:20px;position:relative;font-weight:bold;box-shadow:1px 3px 1px grey;background:#66c2ff;background: linear-gradient(#b2e0ff, #66c2ff );background: -o-linear-gradient(#b2e0ff, #66c2ff );background: -moz-linear-gradient(#b2e0ff, #66c2ff );background: -webkit-linear-gradient(#b2e0ff, #66c2ff );font-family: verdana,georgia,sans-serif;color:#004c80;border-top-left-radius:30px;border-bottom-right-radius:30px;border-top-right-radius:6px;border-bottom-left-radius:6px;border-bottom:5px solid #005c99;border-top:none;border-left:none;border-right:none;}.jump-link a:hover {background: #b2e0ff;
text-decoration: none;
}
Preview Of Button
Code For Button
.jump-link a {padding: 10px 15px;
text-shadow:0px 1px 1px white;;
height:20px;
position:relative;
font-weight:bold;
box-shadow:1px 3px 1px grey;
background:#80ffe6;
background: linear-gradient(#ccfff5 , #80ffe6 );
background: -moz-linear-gradient(#ccfff5 , #80ffe6 );
background: -o-linear-gradient(#ccfff5 , #80ffe6 );
background: -webkit-linear-gradient(#ccfff5 , #80ffe6 );
font-family: verdana,georgia,sans-serif;
color:#008066;
border-top-left-radius:30px;
border-bottom-right-radius:30px;
border-top-right-radius:6px;
border-bottom-left-radius:6px;
border-bottom:5px solid #00997a;
border-top:none;
border-left:none;
border-right:none;
}
.jump-link a:hover {
background: #ccfff5;
text-decoration: none;
}
Preview Of Button
Code For Button
.jump-link a {padding: 10px 15px;
text-shadow:0px 1px 1px white;;
height:20px;
position:relative;
font-weight:bold;
box-shadow:1px 3px 1px grey;
background: #ffcccc;
background: linear-gradient(#ffe0e0, #ffcccc);
background: -moz-linear-gradient(#ffe0e0 , #ffcccc );
background: -webkit-linear-gradient(#ffe0e0 , #ffcccc );
background: -o-linear-gradient(#ffe0e0 , #ffcccc );
font-family: verdana,georgia,sans-serif;
color:#E65C5C;
border-top-left-radius:30px;
border-bottom-right-radius:30px;
border-top-right-radius:6px;
border-bottom-left-radius:6px;
border-bottom:5px solid #E65C5C;
border-top:none;
border-left:none;
border-right:none;
}
.jump-link a:hover {
background: #ffe0e0;
text-decoration: none;
}
Preview Of Button
Code For Button
.jump-link a {
padding: 10px 15px;
text-shadow:0px 1px 1px white;;
height:20px;
position:relative;
font-weight:bold;
box-shadow:0px 3px 1px grey;
background: #ffadd6;
background: linear-gradient(#ffd6eb , #ffadd6 );
background: -moz-linear-gradient(#ffd6eb , #ffadd6 );
background: -o-linear-gradient(#ffd6eb , #ffadd6 );
background: -webkit-linear-gradient(#ffd6eb , #ffadd6 );
font-family: verdana,georgia,sans-serif;
color:#e62e8a;
border-top-left-radius:8px;
border-bottom-right-radius:18px;
border-top-right-radius:8px;
border-bottom-left-radius:18px;
border-bottom:4px solid #e62e8a;
border-top:none;
border-left:none;
border-right:none;
}
.jump-link a:hover {
background: #ffd6eb;
text-decoration: none;
}
Preview Of Button
Code For Button
.jump-link a {
padding: 10px 15px;
text-shadow:0px 1px 1px white;;
height:20px;
position:relative;
font-weight:bold;
box-shadow:0px 3px 1px grey;
background: #99e699;
background: linear-gradient(#d6f5d6 , #99e699 );
background: -moz-linear-gradient(#d6f5d6 , #99e699 );
background: -o-linear-gradient(#d6f5d6 , #99e699 );
background: -webkit-linear-gradient(#d6f5d6 , #99e699 );
font-family: verdana,georgia,sans-serif;
color:#248f24;
border-top-left-radius:8px;
border-bottom-right-radius:18px;
border-top-right-radius:8px;
border-bottom-left-radius:18px;
border-bottom:4px solid #248f24;
border-top:none;
border-left:none;
border-right:none;
}
.jump-link a:hover {
background: #d6f5d6;
text-decoration: none;
}
Preview Of Button
Code For Button
.jump-link a {
padding: 10px 15px;
text-shadow:0px 1px 1px white;;
height:20px;
position:relative;
font-weight:bold;
box-shadow:1px 3px 1px grey;
background: #e066ff;
background: linear-gradient(#f5ccff , #e066ff );
background: -moz-linear-gradient(#f5ccff , #e066ff );
background: -o-linear-gradient(#f5ccff , #e066ff );
background: -webkit-linear-gradient(#f5ccff , #e066ff );
font-family: verdana,georgia,sans-serif;
color:#8f00b2;
border-top-left-radius:30px;
border-bottom-right-radius:6px;
border-top-right-radius:6px;
border-bottom-left-radius:30px;
border-bottom:4px solid #8f00b2;
border-top:none;
border-left:none;
border-right:2px solid #8f00b2;
}
.jump-link a:hover {
background: #f5ccf5;
text-decoration: none;
}
Preview Of Button
Code For Button
.jump-link a {
padding: 10px 15px;
text-shadow:0px 1px 1px white;;
height:20px;
position:relative;
font-weight:bold;
box-shadow:1px 3px 1px grey;
background: #db70b8;
background: linear-gradient(#f5d6eb, #db70b8);
background: -moz-linear-gradient(#f5d6eb, #db70b8);
background: -o-linear-gradient(#f5d6eb, #db70b8);
background: -webkit-linear-gradient(#f5d6eb, #db70b8);
font-family: verdana,georgia,sans-serif;
color:#a3297a;
border-top-left-radius:6px;
border-bottom-right-radius:30px;
border-top-right-radius:30px;
border-bottom-left-radius:6px;
border-bottom:4px solid #a3297a;
border-top:none;
border-left:none;
border-right:none;
}
.jump-link a:hover {
background: #f5d6eb;
text-decoration: none;
}
Preview Of Button
Code For Button
.jump-link a {
padding: 10px 15px;
text-shadow:0px 1px 1px white;;
height:20px;
position:relative;
font-weight:bold;
box-shadow:1px 3px 1px grey;
background: #66ffc2;
background: linear-gradient(#e6faf5, #66ffc2);
background: -moz-linear-gradient(#e6faf5, #66ffc2);
background: -o-linear-gradient(#e6faf5, #66ffc2);
background: -webkit-linear-gradient(#e6faf5, #66ffc2);
font-family: verdana,georgia,sans-serif;
color:#00995c;
border-top-left-radius:20px;
border-bottom-right-radius:6px;
border-top-right-radius:20px;
border-bottom-left-radius:6px;
border-bottom:4px solid #00995c;
border-top:none;
border-left:none;
border-right:none;
}
.jump-link a:hover {
background: #e6faf5;
text-decoration: none;
}
Preview Of Button
Code For Button
.jump-link a {
padding: 10px 15px;
text-shadow:0px 1px 1px white;;
height:20px;
position:relative;
font-weight:bold;
box-shadow:1px 3px 1px grey;
background: #66ffc2;
background: linear-gradient(#e6faf5, #66ffc2);
background: -moz-linear-gradient(#e6faf5, #66ffc2);
background: -o-linear-gradient(#e6faf5, #66ffc2);
background: -webkit-linear-gradient(#e6faf5, #66ffc2);
font-family: verdana,georgia,sans-serif;
color:#00995c;
border-top-left-radius:20px;
border-bottom-right-radius:6px;
border-top-right-radius:20px;
border-bottom-left-radius:6px;
border-bottom:4px solid #00995c;
border-top:none;
border-left:none;
border-right:none;
}
.jump-link a:hover {
background: #e6faf5;
text-decoration: none;
}
Preview Of Button
Code For Button
.jump-link a {
padding: 10px 15px;
text-shadow:0px 1px 1px white;;
height:20px;
position:relative;
font-weight:bold;
box-shadow:1px 3px 1px grey;
background: #66ffc2;
background: linear-gradient(#e6faf5, #66ffc2);
background: -moz-linear-gradient(#e6faf5, #66ffc2);
background: -o-linear-gradient(#e6faf5, #66ffc2);
background: -webkit-linear-gradient(#e6faf5, #66ffc2);
font-family: verdana,georgia,sans-serif;
color:#00995c;
border-top-left-radius:20px;
border-bottom-right-radius:6px;
border-top-right-radius:20px;
border-bottom-left-radius:6px;
border-bottom:4px solid #00995c;
border-top:none;
border-left:none;
border-right:none;
}
.jump-link a:hover {
background: #e6faf5;
text-decoration: none;
}
Preview Of Button
Code For Button
.jump-link a {
padding: 10px 22px;
text-shadow:0px 1px 1px white;;
height:20px;
position:relative;
font-weight:bold;
box-shadow:1px 3px 1px grey;
background:#19a347;
background: linear-gradient(#ccebd6, #19a347);
background: -moz-linear-gradient(#ccebd6, #19a347);
background: -o-linear-gradient(#ccebd6, #19a347);
background: -webkit-linear-gradient(#ccebd6, #19a347);
font-family: verdana,georgia,sans-serif;
color:#005c1f;
border-top-left-radius:6px;
border-bottom-right-radius:6px;
border-top-right-radius:40px;
border-bottom-left-radius:40px;
border-bottom:5px solid #005c1f;
border-top:none;
border-left:none;
border-right:none;
}
.jump-link a:hover {
background: #ccebd6;
text-decoration: none;
}
Preview Of Button
Code For Button
.jump-link a {
padding: 10px 22px;
text-shadow:0px 1px 1px white;;
height:20px;
position:relative;
font-weight:bold;
box-shadow:1px 3px 1px grey;
background:#19a347;
background: linear-gradient(#ccebd6, #19a347);
background: -moz-linear-gradient(#ccebd6, #19a347);
background: -o-linear-gradient(#ccebd6, #19a347);
background: -webkit-linear-gradient(#ccebd6, #19a347);
font-family: verdana,georgia,sans-serif;
color:#005c1f;
border-top-left-radius:6px;
border-bottom-right-radius:6px;
border-top-right-radius:40px;
border-bottom-left-radius:40px;
border-bottom:5px solid #005c1f;
border-top:none;
border-left:none;
border-right:none;
}
.jump-link a:hover {
background: #ccebd6;
text-decoration: none;
}
Preview Of Button
Code For Button
.jump-link a {
padding: 10px 15px;
text-shadow:0px 1px 1px white;;
height:20px;
position:relative;
font-weight:bold;
box-shadow:1px 3px 1px grey;
background:#ff0000;
background: linear-gradient(#ffcccc, #ff0000);
background: -moz-linear-gradient(#ffcccc, #ff0000);
background: -o-linear-gradient(#ffcccc, #ff0000);
background: -webkit-linear-gradient(#ffcccc, #ff0000);
font-family: verdana,georgia,sans-serif;
color:#b20000;
border-top-left-radius:20px;
border-bottom-right-radius:6px;
border-top-right-radius:20px;
border-bottom-left-radius:6px;
border-bottom:4px solid #b20000;
border-top:none;
border-left:none;
border-right:none;
}
.jump-link a:hover {
background: #ffcccc;
text-decoration: none;
}
This was all about how you can easily convert the simple looking read more link in blogger to a stylish 3d read morebutton. See you until next time. Till then,
