Add Awesome CSS3 Google Style Buttons To Blogger:Digital Tech Inspiration

Today in this tutorial I would like to share how to add colorful Google style buttons with hover effect to your blog/website. These awesome Google style buttons are of 4 different colors (Gray, Blue, Red, and Yellow). You can add these buttons in 2 steps into your Blog/Website; also the usage of the buttons is very 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.

Before moving to the tutorial you can see the different colored Google style buttons below in action.

Google Yellow Google Gray Google Blue Google Red

How to Add Google Style Buttons to Your 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 that paste the following code.

.PlusYellow { display: inline-block; background: #fbfb00; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FCFD22), color-stop(100%,#f9f911)); background: -moz-linear-gradient(center top, #FCFD22 0%, #f9f911 100%); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; text-shadow: 1px 1px 0px #FFFFF; padding: 7px 12px; margin: 0px 12px 0px 0px; display: inline-block; border-color: #e4e416; text-decoration: none; border-width: 1px; border-style: solid; font-family: Helvetica, Arial, sans-serif; font-size: 12px; color: #6E6E6E; font-weight: bold;}.PlusYellow:hover { background: #ffff19; -webkit-box-shadow: 1px 1px #d8d8d8; -moz-box-shadow: 1px 1px #d8d8d8; box-shadow: 1px 1px #d8d8d8; text-shadow: 1px 1px 0px #ffe01a; border-color: #ffe01a; color: #333;}.PlusYellow:active { color: #000;}.PlusGray { display: inline-block; background: #f3f3f3; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#f1f1f1)); background: -moz-linear-gradient(center top, #f5f5f5 0%, #f1f1f1 100%); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-transition: border-color .218s 0; -moz-transition: border-color .218s 0; -o-transition: border-color .218s 0; transition: border-color .218s 0; text-shadow: 1px 1px 0px #ffffff; padding: 7px 12px; margin: 0px 12px 0px 0px; display: inline-block; text-decoration: none; border-color: #DCDCDC; border-width: 1px; border-style: solid; font-family: Helvetica, Arial, sans-serif; font-size: 12px; color: #6E6E6E; font-weight: bold;}.PlusGray:hover { -webkit-box-shadow: 0px 2px #00002; -moz-box-shadow: 0px 2px #00002; box-shadow: 0px 2px #00002; border-color: #999; color: #333;}.PlusGray:active { -webkit-box-shadow: 1px 1px 3px #dedede inset; -moz-box-shadow: 1px 1px 3px #dedede inset; box-shadow: 1px 1px 3px #dedede inset; border-color: #444; color: #000;}.PlusBlue { display: inline-block; background: #3079ed; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#327BEF), color-stop(100%,#2E77EB)); background: -moz-linear-gradient(center top, #327BEF 0%, #2E77EB 100%); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-transition: border-color .218s 0; -moz-transition: border-color .218s 0; -o-transition: border-color .218s 0; transition: border-color .218s 0; text-shadow: 1px 0px 0px #1a378e; padding: 7px 12px; margin: 0px 12px 0px 0px; display: inline-block; border-color: #0066cc; text-decoration: none; border-width: 1px; border-style: solid; font-family: Helvetica, Arial, sans-serif; font-size: 12px; color: #ffffff; font-weight: bold;}.PlusBlue:hover { background: #2D71EE; -webkit-box-shadow: 1px 1px #d8d8d8; -moz-box-shadow: 1px 1px #d8d8d8; box-shadow: 1px 1px #d8d8d8; text-shadow: 1px 1px 0px #001AA6; border-color: #291f93;}.PlusBlue:active { background: #2A69EF; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#327aef), color-stop(100%,#2e76eb)); background: -moz-linear-gradient(center top, #327aef 0%, #2e76eb 100%); -webkit-box-shadow: 1px 1px 3px 0px #0066cc inset; -moz-box-shadow: 1px 1px 3px 0px #0066cc inset; box-shadow: 1px 1px 3px 0px #0066cc inset; text-shadow: 1px 1px 0px #001AA6; border-color: #444444;}.PlusRed { display: inline-block; text-decoration: none; background: #eb3232; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FC2222), color-stop(100%,#F81111)); background: -moz-linear-gradient(center top, #FC2222 0%, #F81111 100%); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-transition: background-color .218s 0; -moz-transition: background-color .218s 0; -o-transition: background-color .218s 0; transition: background-color .218s 0; text-shadow: 1px 1px 0px #a60000; padding: 7px 12px; margin: 0px 12px 0px 0px; display: inline-block; border-color: #cc0000; border-width: 1px; border-style: solid; font-family: Helvetica, Arial, sans-serif; font-size: 12px; color: #ffffff; font-weight: bold;}.PlusRed:hover { -webkit-box-shadow: 1px 1px #d8d8d8; -moz-box-shadow: 1px 1px #d8d8d8; box-shadow: 1px 1px #d8d8d8; text-shadow: 1px 1px 1px #a60000; border-color: #912020;}.PlusRed:active { background: #ed2b2b; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ed3232), color-stop(100%,#eb2f2f)); background: -moz-linear-gradient(center top, #ed3232 0%, #eb2f2f 100%); -webkit-box-shadow: 1.5px 1.5px 3px #cc0000 inset; -moz-box-shadow: 1.5px 1.5px 3px #cc0000 inset; box-shadow: 1.5px 1.5px 3px #cc0000 inset; border-color: #ad4b4b;}

STEP #10: Now click on Save and
it’s done.

How to Implement?

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.

<a href="#" class="PlusYellow">Google Yellow</a>

<a href="#" class="PlusGray">Google Gray</a>

<a href="#" class="PlusBlue">Google Blue</a>

<a href="#" class="PlusRed">Google Red</a>

How to Customize?

Replace # with link URL
Replace Google Blue, Google Red, Google Yellow, Google Gray 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.