If You Want Adsense Approval for your blog JOIN US Adsense Ready theme Now!

Colors and a flat button display,

By utilizing metro colors and a flat button display, it will be more beautiful and make our blog look a little more beautiful and professional.

In this tutorial I will discuss how to make a beautiful 3d flat button on your blogger or blogspot , like in this blog. For the trick here, we simply take advantage of the box-shadow thickness effect when the button is normal, hovered or when the button is active. The logic is that when the normal button box-shadow looks thick, when the visitor hovers the button, the box-shadow on the button will look thinner and when the button is active, the box-shadow will disappear.

By utilizing metro colors and a flat button display, it will be more beautiful and make our blog look a little more beautiful and professional.

Immediately, here are the steps:
1. Please first backup your default template, here is a tutorial on how to backup blogger templates:
An easy way to backup a blogger or blogspot template

2. Next you edit your blogger template, if you don't know how to edit a blogger template, here's how to edit a blogger template:
How to edit a blogger or blogspot template

3. After entering your template editor page, put the following code before code ]]></b:skin>or </style>:

/* CSS button */
  .gmr-btn {background-color: #3498DB;box-shadow: 0px 6px #2980B9;-moz-box-shadow: 0px 6px #2980B9;-webkit-box-shadow: 0px 6px #2980B9;-webkit-transition: none;-moz-transition: none;transition: none;display: inline-block;padding:10px 40px;margin: 0 0 10px 0;vertical-align: middle;font-size: 16px;border:none !important;color: #fff !important;text-decoration: none !important;}
  .gmr-btn:hover{top:4px;position:relative;box-shadow: 0px 2px #2980B9;-moz-box-shadow: 0px 2px #2980B9;-webkit-box-shadow: 0px 2px #2980B9;}
  .gmr-btn-red{background-color: #E74C3C;box-shadow: 0px 6px #BD3E31;-moz-box-shadow: 0px 6px #BD3E31;-webkit-box-shadow: 0px 6px #BD3E31;}
  .gmr-btn-red:hover{box-shadow: 0px 2px #BD3E31;-moz-box-shadow: 0px 2px #BD3E31;-webkit-box-shadow: 0px 2px #BD3E31;}
  .gmr-btn-green{background-color: #82BF56;box-shadow: 0px 6px #669644;-moz-box-shadow: 0px 6px #669644;-webkit-box-shadow: 0px 6px #669644;}
  .gmr-btn-green:hover{box-shadow: 0px 2px #669644;-moz-box-shadow: 0px 2px #669644;-webkit-box-shadow: 0px 2px #669644;}
  .gmr-btn-yellow{background-color: #F2CF66;box-shadow: 0px 6px #D1B358;-moz-box-shadow: 0px 6px #D1B358;-webkit-box-shadow: 0px 6px #D1B358;}
  .gmr-btn-yellow:hover{box-shadow: 0px 2px #D1B358;-moz-box-shadow: 0px 2px #D1B358;-webkit-box-shadow: 0px 2px #D1B358;}
  .gmr-btn-gray{background-color: #95a5a6;box-shadow: 0px 6px #7f8c8d;-webkit-box-shadow: 0px 6px #7f8c8d;-moz-box-shadow: 0px 6px #7f8c8d;}
  .gmr-btn-gray:hover{box-shadow: 0px 2px #7f8c8d;-moz-box-shadow: 0px 2px #7f8c8d;-webkit-box-shadow: 0px 2px #7f8c8d;}
  .gmr-btn-purple{background-color: #9b59b6;box-shadow: 0px 6px #8e44ad;-moz-box-shadow: 0px 6px #8e44ad;-webkit-box-shadow: 0px 6px #8e44ad;}
  .gmr-btn-purple:hover{box-shadow: 0px 2px #8e44ad;-moz-box-shadow: 0px 2px #8e44ad;-webkit-box-shadow: 0px 2px #8e44ad;}
  .gmr-btn-orange{background-color: #e67e22;box-shadow: 0px 6px #d35400;-moz-box-shadow: 0px 6px #d35400;-webkit-box-shadow: 0px 6px #d35400;}
  .gmr-btn-orange:hover{box-shadow: 0px 2px #d35400;-moz-box-shadow: 0px 2px #d35400;-webkit-box-shadow: 0px 2px #d35400}
  .gmr-btn-dark{background-color: #34495e;box-shadow: 0px 6px #2c3e50;-moz-box-shadow: 0px 6px #2c3e50;-webkit-box-shadow: 0px 6px #2c3e50;}
  .gmr-btn-dark:hover{box-shadow: 0px 2px #2c3e50;-moz-box-shadow: 0px 2px #2c3e50;-webkit-box-shadow: 0px 2px #2c3e50;}
  .gmr-btn-block{width:100%;position:relative;display:block;text-align:center;}
  .gmr-btn:active{top:6px;position:relative;box-shadow: none;-moz-box-shadow: none;-webkit-box-shadow: none;}
  

4. How to use it, you just need to enter the class code in your button in your class='gmr-btn'template, or if you enter it in your post, you can enter the code class="gmr-btn". For block buttons or buttons with a width of 100% you can enter class class="gmr-btn gmr-btn-block". To enter a color, you can simply enter, class="gmr-btn gmr-btn-red gmr-btn-block"then your button is red with a width of 100%. Here is an example of html that I have created.

  <button class="gmr-btn">Button 1</button>
  <button class="gmr-btn gmr-btn-red">Button 2</button><br />
  <button class="gmr-btn gmr-btn-green">Button 3</button>
  <button class="gmr-btn gmr-btn-yellow">Button 4</button><br />
  <button class="gmr-btn gmr-btn-gray">Button 5</button>
  <button class="gmr-btn gmr-btn-purple">Button 6</button><br />
  <button class="gmr-btn gmr-btn-orange">Button 7</button>
  <button class="gmr-btn gmr-btn-dark">Button 8</button><br />
  <button class="gmr-btn gmr-btn-dark gmr-btn-block">Button 9</button>
  

Below is the result of the above code:





Easy isn't it, please create your own with your CSS.

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.