How to change jumplink or readmore link with css button

Here today i'm going to tell you how to change your blog's jumplink or pagebreaker link or readmore link with CSS Button.

First of all you have to select your button style among these:

1 style

ReadMore If you want this type of button just copy the below code

.btn {

  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 14px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.btn:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

2nd style

ReadMore

If you want this type of button just copy the below code.

.btn {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0px;
  font-family: Arial;
  color: #ffffff;
  font-size: 14px;
  background: #e0163e;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.btn:hover {
  background: #45523e;
  text-decoration: none;
}

3rd option

If you want to make a button of your own style you can make it on css3buttongenerator.com/



After choosing one of the style i had above created or your own style just copy the given code of the Button style



Login to your Blogger Dashboard.
Go to Templates.
Click Edit Templates.
Now find ]]></b:skin> paste the copied code before it
Now again search for <div class='jump-link'>
Replace the searched code with <p class='btn'>Read More</p>