I have already told you about some awesome CSS based buttons which were adopted from some of most popular sites in the world like Google , Facebook , Amazon etc. But today i will tell you about a cool and simple black CSS button with Pseudo element and how can you add it to your blog.
How To Add These Simple CSS Buttons With Psuedo-Elements To Your Blog
To add these CSS buttons to your blog follow these steps -
.ig-button{
background-color:#4b3f39;
font-family: ‘Verdana’, sans-serif;
font-size:12px;
text-decoration:none;
color:#fff;
position:relative;
padding:10px 20px;
padding-right:50px;
background-image: linear-gradient(bottom, rgb(62,51,46) 0%, rgb(101,86,78) 100%);
border-radius: 5px;
box-shadow: inset 0px 1px 0px #9e8d84, 0px 5px 0px 0px #322620, 0px 10px 5px #999;
}
.ig-button:active {
top:3px;
background-image: linear-gradient(bottom, rgb(62,51,46) 100%, rgb(101,86,78) 0%);
box-shadow: inset 0px 1px 0px #9e8d84, 0px 2px 0px 0px #322620, 0px 5px 3px #999;
}
.ig-button:before {
background-color:#322620;
background-image:url(https://lh3.googleusercontent.com/-LtgkrgnPcmI/TzzVm8tvg7I/AAAAAAAAA4Y/SO04mp9dcts/h80/helper-blogger-right-arrow.png);
background-repeat:no-repeat;
background-position:center center;
content:”";
width:20px;
height:20px;
position:absolute;
right:15px;
top:50%;
margin-top:-9px;
border-radius: 50%;
box-shadow: inset 0px 1px 0px #19120f, 0px 1px 0px #827066;
}
.ig-button:active::before {
top:50%;
margin-top:-12px;
box-shadow: inset 0px 1px 0px #827066, 0px 3px 0px #19120f, 0px 6px 3px #382e29;
}
Recommended Reading - 3 Different Download Buttons
4. Now use the below code wherever you would like to use the button whether on post, page or sidebar.
5. Replace the bolded text with their respective parameters.
6. You are done :)
You can use these buttons anywhere outside blogger too. The code in the point 3rd is the CSS code and the 4th point is HTML code.
I hope you would like these buttons. Share your thoughts/problems using comment box below. :)
Sirji
This one on work in my site.
Good to know but wondering that my other widgets don’t work on your blog?
Gurwinder Singh recently posted…Apple iMac Review [21.5" iMac vs 27" iMac]
Ya i don’t know y??
Maybe you don’t use them correctly. You never commented on any other post where u faced problem then how can i come to know. Use codes correctly and all will work perfect :)
Gurwinder Singh recently posted…Why WordPress Is Better Than Blogger?