Pure CSS3 Cool Buttons For Your Blog/Website:Digital Tech Inspiration

This time we are sharing cool CSS3 buttons set. This button set contains buttons of 6 different colors (Pink, Green, Blue, Red, Orange and Yellow) and 2 sizes (Large and Medium). You can add these buttons in 2 steps into your Blog/Website,

also the usage of the buttons is easy. You can add more colors if you know some CSS3. CSS3 buttons are really very useful for any Blog/Website because they load fast and don’t put any impact on the loading time.

Now let’s go to the tutorial and see how to add them and use them.

How to Add Cool CSS3 Buttons to Blogger Blog?

STEP #1: Log on to Blogger

STEP #2: Go to Dashboard>Template

STEP #3: Click on Edit HTML>Proceed

STEP #4: Tick on Expanded Template Widget check box

STEP #5: Take a Backup your template

STEP #6: Find (Ctrl + f) for the code below

]]></b:skin>

STEP #7: Just above it paste the following CSS code,

.button, .button:visited {
background-color: #222;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
font-family: calibri;
}
.button:hover {
background-color: #111;
color: #fff;
}
.button:active {
top: 1px;
}
.small.button, .small.button:visited {
font-size: 11px
}
.button, .button:visited,
.medium.button, .medium.button:visited {
font-size: 13px;
font-weight: bold;
line-height: 1;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}
.medium.button, .medium.button:visited {
font-size: 14px;
padding: 8px 14px 9px;
}
.large.button, .large.button:visited {
font-size: 34px;
padding: 8px 14px 9px;
}
.pink.button, .magenta.button:visited {
background-color: #e22092;
}
.pink.button:hover {
background-color: #c81e82;
}
.green.button, .green.button:visited {
background-color: #91bd09;
}
.green.button:hover {
background-color: #749a02;
}
.red.button, .red.button:visited {
background-color: #e62727;
}
.red.button:hover {
background-color: #cf2525;
}
.orange.button, .orange.button:visited {
background-color: #ff5c00;
}
.orange.button:hover {
background-color: #d45500;
}
.blue.button, .blue.button:visited {
background-color: #2981e4;
}
.blue.button:hover {
background-color: #2575cf;
}
.yellow.button, .yellow.button:visited {
background-color: #ffb515;
}
.yellow.button:hover {
background-color: #fc9200;
}

STEP #10: Save your template and you are done!

Implementation:

Now you need to add the style of the buttons. For that Create a new post and on the HTML mode, select any of the below html code for the button you want to appear to your blog post and paste it there. See the preview.

1. Large Size Buttons

2. Medium Size Buttons

Customization:

Replace LINK HERE with link URL
Replace LINK TEXT HERE with the text which you want to appear on the button.

So execute steps correctly and you are done. Head to your blog and check the trick executed. So don't forget us. We will only survive with your generosity. Like, Share, Follow and Subscribe. If you are facing any problem with implementing these codes just comment below for help. Stay tuned for more posts.