CSS Buttons with Hover effect for Blogger Prajjwal Rajput Friday, June 13, 2014 No Comment

Share it
Hello Friends Previously, we shared Attractive Email Subscription Widget and Facebook Popup Like Box but now i will back with another and great thing which is Pure CSS animated buttons.So today i am going to sharing these amazing, animated with hover effects buttons for your blogger blog which can make your blogger blog more beautiful and professional. You can add these buttons in your post area or pages area or anywhere . These are highly quality buttons nay unique styles. I'm going to share these buttons and I've got these unique button from All Blogger Tricks so all credits goes to them. Before you get this widget installing section first let me tell you about these buttons.

Animated Pure CSS Buttons
These buttons are more unique and stylish buttons which can be used as Replace old boring underlined links like Demo, Download, or any kind of links in blogger blog. These are made with pure CSS Script. I have Four themes of these button which are Blue, Green, Orange and Grey with different styles and Sizes. These buttons have stylish animates background like a video. It also has Hover effect which used to animate this and which make this more unique and beautiful. Adding these unique animated buttons in blogger is no difficult, it is very easy to install so let's start to add this buttons in your blogger blogs.

How to Install Buttons in Blogger Blog?

  • Go to Blogger Dashboard>>Template>>Edit HTML
  • Find this code using Ctrl+F
]]></b:skin>

  •  Paste the below given code above it.
.button {display: inline-block;position: relative;padding: 10px 20px;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;text-decoration: none!important;text-shadow: 1px 1px 0 rgba(255,255,255,0.4);font: 15px Calibri,Arial,sans-serif;white-space: nowrap;vertical-align: baseline;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1jfQuh9RdZM2Fisbay5D8xvVzBi5OlB6BdcT74KMMGa9b8e5-Eh9iNpe2Bad2NKJHC0NOzOBAXqRkWXN7YsAAQQOG5PDFODRFC5aHv346iQszPqRnKNIaeOnjyBfZ0u8Ah6VrXeaqhYlB/s144/button_bg.png');background-position: bottom left;background-position: bottom left,top right,0 0,0 0;background-repeat: no-repeat;background-clip: border-box;-webkit-box-shadow: 0 0 1px #fff inset;-moz-box-shadow: 0 0 1px #fff inset;box-shadow: 0 0 1px #fff inset;-webkit-transition: background-position 1s;-moz-transition: background-position 1s;transition: background-position 1s;cursor: pointer;}
.button:hover {background-position: top left;background-position: top left,bottom right,0 0,0 0;}
.button:active {bottom: -1px;}
.button.big {font-size: 30px;}
.button.medium {font-size: 18px;}
.button.small {font-size: 13px;}
.blue.button {border: 1px solid #84acc3!important;color: #0f4b6d!important;background-color: #48b5f2;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1jfQuh9RdZM2Fisbay5D8xvVzBi5OlB6BdcT74KMMGa9b8e5-Eh9iNpe2Bad2NKJHC0NOzOBAXqRkWXN7YsAAQQOG5PDFODRFC5aHv346iQszPqRnKNIaeOnjyBfZ0u8Ah6VrXeaqhYlB/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1jfQuh9RdZM2Fisbay5D8xvVzBi5OlB6BdcT74KMMGa9b8e5-Eh9iNpe2Bad2NKJHC0NOzOBAXqRkWXN7YsAAQQOG5PDFODRFC5aHv346iQszPqRnKNIaeOnjyBfZ0u8Ah6VrXeaqhYlB/s144/button_bg.png') ,-moz-radial-gradient(center bottom,circle,rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),-moz-linear-gradient(#4fbbf7,#3faeeb);background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1jfQuh9RdZM2Fisbay5D8xvVzBi5OlB6BdcT74KMMGa9b8e5-Eh9iNpe2Bad2NKJHC0NOzOBAXqRkWXN7YsAAQQOG5PDFODRFC5aHv346iQszPqRnKNIaeOnjyBfZ0u8Ah6VrXeaqhYlB/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1jfQuh9RdZM2Fisbay5D8xvVzBi5OlB6BdcT74KMMGa9b8e5-Eh9iNpe2Bad2NKJHC0NOzOBAXqRkWXN7YsAAQQOG5PDFODRFC5aHv346iQszPqRnKNIaeOnjyBfZ0u8Ah6VrXeaqhYlB/s144/button_bg.png') ,-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(89,208,244,1) ),to(rgba(89,208,244,0) )),-webkit-gradient(linear,0% 0,0% 100%,from(#4fbbf7),to(#3faeeb));}
.blue.button:hover {background-color: #63c7fe;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1jfQuh9RdZM2Fisbay5D8xvVzBi5OlB6BdcT74KMMGa9b8e5-Eh9iNpe2Bad2NKJHC0NOzOBAXqRkWXN7YsAAQQOG5PDFODRFC5aHv346iQszPqRnKNIaeOnjyBfZ0u8Ah6VrXeaqhYlB/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1jfQuh9RdZM2Fisbay5D8xvVzBi5OlB6BdcT74KMMGa9b8e5-Eh9iNpe2Bad2NKJHC0NOzOBAXqRkWXN7YsAAQQOG5PDFODRFC5aHv346iQszPqRnKNIaeOnjyBfZ0u8Ah6VrXeaqhYlB/s144/button_bg.png') ,-moz-radial-gradient(center bottom,circle,rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),-moz-linear-gradient(#63c7fe,#58bef7);background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1jfQuh9RdZM2Fisbay5D8xvVzBi5OlB6BdcT74KMMGa9b8e5-Eh9iNpe2Bad2NKJHC0NOzOBAXqRkWXN7YsAAQQOG5PDFODRFC5aHv346iQszPqRnKNIaeOnjyBfZ0u8Ah6VrXeaqhYlB/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1jfQuh9RdZM2Fisbay5D8xvVzBi5OlB6BdcT74KMMGa9b8e5-Eh9iNpe2Bad2NKJHC0NOzOBAXqRkWXN7YsAAQQOG5PDFODRFC5aHv346iQszPqRnKNIaeOnjyBfZ0u8Ah6VrXeaqhYlB/s144/button_bg.png') ,-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(109,217,250,1) ),to(rgba(109,217,250,0) )),-webkit-gradient(linear,0% 0,0% 100%,from(#63c7fe),to(#58bef7));}
.green.button {border: 1px solid #96a37b!important;color: #345903!important;background-color: #79be1e;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1jfQuh9RdZM2Fisbay5D8xvVzBi5OlB6BdcT74KMMGa9b8e5-Eh9iNpe2Bad2NKJHC0NOzOBAXqRkWXN7YsAAQQOG5PDFODRFC5aHv346iQszPqRnKNIaeOnjyBfZ0u8Ah6VrXeaqhYlB/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1jfQuh9RdZM2Fisbay5D8xvVzBi5OlB6BdcT74KMMGa9b8e5-Eh9iNpe2Bad2NKJHC0NOzOBAXqRkWXN7YsAAQQOG5PDFODRFC5aHv346iQszPqRnKNIaeOnjyBfZ0u8Ah6VrXeaqhYlB/s144/button_bg.png') ,-moz-radial-gradient(center bottom,circle,rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27,#74b317);background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1jfQuh9RdZM2Fisbay5D8xvVzBi5OlB6BdcT74KMMGa9b8e5-Eh9iNpe2Bad2NKJHC0NOzOBAXqRkWXN7YsAAQQOG5PDFODRFC5aHv346iQszPqRnKNIaeOnjyBfZ0u8Ah6VrXeaqhYlB/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1jfQuh9RdZM2Fisbay5D8xvVzBi5OlB6BdcT74KMMGa9b8e5-Eh9iNpe2Bad2NKJHC0NOzOBAXqRkWXN7YsAAQQOG5PDFODRFC5aHv346iQszPqRnKNIaeOnjyBfZ0u8Ah6VrXeaqhYlB/s144/button_bg.png') ,-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(162,211,30,1) ),to(rgba(162,211,30,0) )),-webkit-gradient(linear,0% 0,0% 100%,from(#82cc27),to(#74b317));}
.green.button:hover {background-color: #89d228;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1jfQuh9RdZM2Fisbay5D8xvVzBi5OlB6BdcT74KMMGa9b8e5-Eh9iNpe2Bad2NKJHC0NOzOBAXqRkWXN7YsAAQQOG5PDFODRFC5aHv346iQszPqRnKNIaeOnjyBfZ0u8Ah6VrXeaqhYlB/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1jfQuh9RdZM2Fisbay5D8xvVzBi5OlB6BdcT74KMMGa9b8e5-Eh9iNpe2Bad2NKJHC0NOzOBAXqRkWXN7YsAAQQOG5PDFODRFC5aHv346iQszPqRnKNIaeOnjyBfZ0u8Ah6VrXeaqhYlB/s144/button_bg.png') ,-moz-radial-gradient(center bottom,circle,rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31,#7fc01e);background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1jfQuh9RdZM2Fisbay5D8xvVzBi5OlB6BdcT74KMMGa9b8e5-Eh9iNpe2Bad2NKJHC0NOzOBAXqRkWXN7YsAAQQOG5PDFODRFC5aHv346iQszPqRnKNIaeOnjyBfZ0u8Ah6VrXeaqhYlB/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1jfQuh9RdZM2Fisbay5D8xvVzBi5OlB6BdcT74KMMGa9b8e5-Eh9iNpe2Bad2NKJHC0NOzOBAXqRkWXN7YsAAQQOG5PDFODRFC5aHv346iQszPqRnKNIaeOnjyBfZ0u8Ah6VrXeaqhYlB/s144/button_bg.png') ,-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(183,229,45,1) ),to(rgba(183,229,45,0) )),-webkit-gradient(linear,0% 0,0% 100%,from(#90de31),to(#7fc01e));}
.orange.button {border: 1px solid #bea280!important;color: #693e0a!important;background-color: #e38d27;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1jfQuh9RdZM2Fisbay5D8xvVzBi5OlB6BdcT74KMMGa9b8e5-Eh9iNpe2Bad2NKJHC0NOzOBAXqRkWXN7YsAAQQOG5PDFODRFC5aHv346iQszPqRnKNIaeOnjyBfZ0u8Ah6VrXeaqhYlB/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1jfQuh9RdZM2Fisbay5D8xvVzBi5OlB6BdcT74KMMGa9b8e5-Eh9iNpe2Bad2NKJHC0NOzOBAXqRkWXN7YsAAQQOG5PDFODRFC5aHv346iQszPqRnKNIaeOnjyBfZ0u8Ah6VrXeaqhYlB/s144/button_bg.png') ,-moz-radial-gradient(center bottom,circle,rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f,#d4821f);background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1jfQuh9RdZM2Fisbay5D8xvVzBi5OlB6BdcT74KMMGa9b8e5-Eh9iNpe2Bad2NKJHC0NOzOBAXqRkWXN7YsAAQQOG5PDFODRFC5aHv346iQszPqRnKNIaeOnjyBfZ0u8Ah6VrXeaqhYlB/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1jfQuh9RdZM2Fisbay5D8xvVzBi5OlB6BdcT74KMMGa9b8e5-Eh9iNpe2Bad2NKJHC0NOzOBAXqRkWXN7YsAAQQOG5PDFODRFC5aHv346iQszPqRnKNIaeOnjyBfZ0u8Ah6VrXeaqhYlB/s144/button_bg.png') ,-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(232,189,45,1) ),to(rgba(232,189,45,0) )),-webkit-gradient(linear,0% 0,0% 100%,from(#f1982f),to(#d4821f));}
.orange.button:hover {background-color: #ec9732;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1jfQuh9RdZM2Fisbay5D8xvVzBi5OlB6BdcT74KMMGa9b8e5-Eh9iNpe2Bad2NKJHC0NOzOBAXqRkWXN7YsAAQQOG5PDFODRFC5aHv346iQszPqRnKNIaeOnjyBfZ0u8Ah6VrXeaqhYlB/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1jfQuh9RdZM2Fisbay5D8xvVzBi5OlB6BdcT74KMMGa9b8e5-Eh9iNpe2Bad2NKJHC0NOzOBAXqRkWXN7YsAAQQOG5PDFODRFC5aHv346iQszPqRnKNIaeOnjyBfZ0u8Ah6VrXeaqhYlB/s144/button_bg.png') ,-moz-radial-gradient(center bottom,circle,rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746,#e18f2b);background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1jfQuh9RdZM2Fisbay5D8xvVzBi5OlB6BdcT74KMMGa9b8e5-Eh9iNpe2Bad2NKJHC0NOzOBAXqRkWXN7YsAAQQOG5PDFODRFC5aHv346iQszPqRnKNIaeOnjyBfZ0u8Ah6VrXeaqhYlB/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1jfQuh9RdZM2Fisbay5D8xvVzBi5OlB6BdcT74KMMGa9b8e5-Eh9iNpe2Bad2NKJHC0NOzOBAXqRkWXN7YsAAQQOG5PDFODRFC5aHv346iQszPqRnKNIaeOnjyBfZ0u8Ah6VrXeaqhYlB/s144/button_bg.png') ,-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(241,192,52,1) ),to(rgba(241,192,52,0) )),-webkit-gradient(linear,0% 0,0% 100%,from(#f9a746),to(#e18f2b));}
.gray.button {border: 1px solid #a5a5a5!important;color: #525252!important;background-color: #a9adb1;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1jfQuh9RdZM2Fisbay5D8xvVzBi5OlB6BdcT74KMMGa9b8e5-Eh9iNpe2Bad2NKJHC0NOzOBAXqRkWXN7YsAAQQOG5PDFODRFC5aHv346iQszPqRnKNIaeOnjyBfZ0u8Ah6VrXeaqhYlB/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1jfQuh9RdZM2Fisbay5D8xvVzBi5OlB6BdcT74KMMGa9b8e5-Eh9iNpe2Bad2NKJHC0NOzOBAXqRkWXN7YsAAQQOG5PDFODRFC5aHv346iQszPqRnKNIaeOnjyBfZ0u8Ah6VrXeaqhYlB/s144/button_bg.png') ,-moz-radial-gradient(center bottom,circle,rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca,#92989c);background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1jfQuh9RdZM2Fisbay5D8xvVzBi5OlB6BdcT74KMMGa9b8e5-Eh9iNpe2Bad2NKJHC0NOzOBAXqRkWXN7YsAAQQOG5PDFODRFC5aHv346iQszPqRnKNIaeOnjyBfZ0u8Ah6VrXeaqhYlB/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1jfQuh9RdZM2Fisbay5D8xvVzBi5OlB6BdcT74KMMGa9b8e5-Eh9iNpe2Bad2NKJHC0NOzOBAXqRkWXN7YsAAQQOG5PDFODRFC5aHv346iQszPqRnKNIaeOnjyBfZ0u8Ah6VrXeaqhYlB/s144/button_bg.png') ,-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(197,199,202,1) ),to(rgba(197,199,202,0) )),-webkit-gradient(linear,0% 0,0% 100%,from(#c5c7ca),to(#92989c));}
.gray.button:hover {background-color: #b6bbc0;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1jfQuh9RdZM2Fisbay5D8xvVzBi5OlB6BdcT74KMMGa9b8e5-Eh9iNpe2Bad2NKJHC0NOzOBAXqRkWXN7YsAAQQOG5PDFODRFC5aHv346iQszPqRnKNIaeOnjyBfZ0u8Ah6VrXeaqhYlB/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1jfQuh9RdZM2Fisbay5D8xvVzBi5OlB6BdcT74KMMGa9b8e5-Eh9iNpe2Bad2NKJHC0NOzOBAXqRkWXN7YsAAQQOG5PDFODRFC5aHv346iQszPqRnKNIaeOnjyBfZ0u8Ah6VrXeaqhYlB/s144/button_bg.png') ,-moz-radial-gradient(center bottom,circle,rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6,#9fa5a9);background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1jfQuh9RdZM2Fisbay5D8xvVzBi5OlB6BdcT74KMMGa9b8e5-Eh9iNpe2Bad2NKJHC0NOzOBAXqRkWXN7YsAAQQOG5PDFODRFC5aHv346iQszPqRnKNIaeOnjyBfZ0u8Ah6VrXeaqhYlB/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1jfQuh9RdZM2Fisbay5D8xvVzBi5OlB6BdcT74KMMGa9b8e5-Eh9iNpe2Bad2NKJHC0NOzOBAXqRkWXN7YsAAQQOG5PDFODRFC5aHv346iQszPqRnKNIaeOnjyBfZ0u8Ah6VrXeaqhYlB/s144/button_bg.png') ,-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(202,205,208,1) ),to(rgba(202,205,208,0) )),-webkit-gradient(linear,0% 0,0% 100%,from(#d1d3d6),to(#9fa5a9));}
  • Then Click on Save Template
  • Now you are installed these buttons in your blog posts or anywhere.

 Adding this on Blogger Blog:-

  • Go to Blogger>>New Post>>HTML Tab
  • Pick up the button from below code 
  • Paste the one sizes code in the HTML Tab
Code for Large Buttons:
<a class="button big blue" href="LINK">LINKNAME</a><a class="button big green" href="LINK">LINKNAME</a><a class="button big orange" href="LINK">LINKNAME</a><a class="button big gray" href="LINK">LINKNAME</a>
Code for Medium Buttons:
<a class="button blue medium" href="LINK">LINKNAME</a><a class="button green medium" href="LINK">LINKNAME</a><a class="button orange medium" href="LINK">LINKNAME</a><a class="button gray medium" href="LINK">LINKNAME</a> 
Code for Small Buttons: 

<a class="button small blue" href="LINK">LINKNAME</a><a class="button small green" href="LINK">LINKNAME</a><a class="button small orange" href="LINK">LINKNAME</a><a class="button small gray" href="LINK">LINKNAME</a>

  •  Replace "LINK" with your URL
  • Replace "LINKNAME with your link name which display in Buttons.
  • Now Complete Click on Publish Post
  • You can also check it in the preview
  • Congratulations! You are successfully added this buttons in your blogger blogs.
Final Words
So Friends,I hope you're add this button in blogger blog perfectly if you're getting error during this process or any problem then feel ask in the comment box. Get in touch with us more and leave your Feed backs. And don't forget to like our Facebook Page.
Happy Blogging!


Tags:
Posted by Prajjwal Rajput at Friday, June 13, 2014
Labels:
Related

No Comment

Comment Policy
We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Subscribe to: Post Comments ( Atom )

Register To Our Newsletter!

Love to read our articles? Register now to get fresh content about Blogger Tricks, SEO, Widgets, Templates directly to your inbox.

                                 Copyright © 2014 Next Blogger Tricks. All Rights Reserved. Designed By Next Blogger Tricks'
Home | About Us | Contact Us | Privacy Policy | Sitemap