Beauty

Turkusowy przycisk 3D

Demo

Jak umieścić przycisk na Bloggerze?

Zaloguj się na swoje konto i przejdź do menu Szablon => Edytuj kod HTML.
Kliknij w okno edytora i wciśnij kombinację klawiszy Ctrl+F. Używając wyszukiwarki znajdź:
</head>
Tuż nad znalezionym znacznikiem wklej kod:
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

Teraz wyszukaj:
]]></b:skin>
I tuż nad nim wklej kod:
/* Turkusowy przycisk 3D
----------------------------------------------- */
a.btn {
  background: #5DC8CD; /* kolor  tła przycisku */
  box-shadow: 0px 5px 0px 0px #1E8185;
  display: inline-block;
  position: relative;
  padding: 0 40px;
  margin: 10px auto;
  font-weight: 600;
  text-align: center;
  line-height: 50px;
  color: #FFF;
  border-radius: 5px;
  transition: all 0.2s ;
  text-decoration: none;
  font-family: Arial;
  font-size: 16px;
}
a.btn:hover {
  box-shadow: 0px 0px 0px 0px #1E8185;
  margin-top: 15px;
  margin-bottom: 5px;
}
a.btn:before {
font-family: FontAwesome;
}
Następnie Zapisz szablon.

Teraz przejdź do edycji nowego posta.
Edytor posta przełącz do trybu HTML i w jego treści wpisz poniższy kod. Na koniec Opublikuj.
<center><a href="http://www.blokotek.pl/" class="btn"><i class="fa fa-download"></i>Turkusowy przycisk 3D</a></center>
Kody ikon znajdziesz na stronie czcionki Font Awesome.

Instagram