Pomarańczowy, nowoczesny przycisk z ikoną

przez - kwietnia 25, 2015

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
----------------------------------------------- */
.btn {
  display: inline-block;
  position: relative;
  cursor: pointer;
  outline: none;
  white-space: nowrap;
  margin: 5px;
  color: #FFF; /* Kolor czcionki */
  font-size: 18px;
  font-family: "Arial", sans-serif;;
  padding: 7px 30px;;
  font-weight: 400;
  line-height: 36px;
  background: #F44336; /* Kolor tła przycisku */
  border: none;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
  text-decoration: none;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  transition: background-color .2s linear;
  -moz-transition: background-color .2s linear;
  -webkit-transition: background-color .2s linear;
  -ms-transition: background-color .2s linear;
  -o-transition: background-color .2s linear;
}
.btn:hover {
  background: #f96e5b; /* Kolor tła przycisku po najechaniu kursorem */
  color: #fff;  
}
.btn:before {
  font-family: Font Awesome;
}
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 class="btn" href="http://www.blokotek.pl/"><i class="fa fa-download"></i> Blokotek</a></center>
Kody ikon znajdziesz na stronie czcionki Font Awesome.

Zobacz również

0 komentarzy