3D Buttons for Free in Blogger

3D Buttons for free in blogger these buttons you can use where ever you want and cant edit these button colors too here the Demo image and link to check

Fallow the steps to implement these buttons



Step 1 : HTML code where ever you want to place these buttons paste this HTML code

<div class="wrap">
  <h1>3D Buttons</h1>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Events</a></li>
  </ul>
</div>

Place your html link in red color one

Step 2 : CSS code have to paste in CSS panel in blogger as shown in figure or have to paste this css code before " }]]></b:skin> "

CSS Code :

html {
  background: #171717;
}

body {
  font-family: "helvetica neue", arial, sans-serif;
}

h1 {
  font-weight: bold;
  font-size: 24px;
  text-align: center;
  color: #222;
  margin-top: 20px;
  letter-spacing: -1px;
}

.wrap {
  margin: 50px auto;
  width: 550px;
  height: 160px;
  background: #fff;
  overflow: hidden;
  border-radius: 8px;
  border: solid 10px #3899B7;
}

.wrap ul {
  margin-top: 40px;
  text-align: center;
}

.wrap li {
  display: inline;
  margin: 0 10px;
}

.wrap a {
  text-transform: uppercase;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  text-shadow: 0 1px #777;
  padding: 10px 20px;
  font-size: 14px;
  background: #3899B7;
  border-radius: 4px;
  box-shadow: 0px 4px #28758C, 0px 3px 15px rgba(0, 0, 0, .8);
  border: solid 1px #47B1D2;
  transition: all 0.3s ease;
  position: relative;
}

.wrap a:hover {
  background: #47B1D2;
}

.wrap a:active {
  background: #2B778E;
  bottom: -5px;
  border: solid 1px #2B778E;
}