2015/04/25

Pomarańczowy, nowoczesny przycisk z ikoną

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.

Brak komentarzy :

Prześlij komentarz

Komentarze zawierające SPAM zostaną usunięte.

Szablon stworzony z przez Blokotka. Wszelkie prawa zastrzeżone.