Ulegnij Inspiracji

Tym razem postanowiłem opublikować video-tutorial, w którym pokazuję, jak przy użyciu CSS3, przygotować całkiem dobrze wyglądający przycisk z efektem przejścia. Ponieważ zbliżają się Walentynki, przykład ma odpowiadający im charakter i kolory. Pomińmy to czy ktoś lubi to święto i kolor różowy ;). Z uwagi na użycie CSS3 i efektów przejścia, rezultat w pełnej krasie dostępny jest w przeglądarkach Safari i Chrome.

ZOBACZ DEMO

Co będzie potrzebne:
- edytor graficzny (w tutorialu: Pixelmator)
- edytor html (w tutorialu Espresso)
- edytor CSS (najlepiej CSS Edit)

Jak to wygląda krok po kroku? Zobacz wideo. Przepraszam z góry na brak dźwięku, następny tutorial postaram się zamieścić z komentarzem.

Pobierz tutorial – 896×560, 13.65MB

Poniżej kod zawarty w tutorialu.

HTML:

<a class="valentine_button" href="http://ulegnij-inspiracji.pl">
click if you ❤ me
</a>

CSS:

.valentine_button {
color: #7c0240;
font: bold 16px/40px "Lucida Grande", Lucida, Verdana, sans-serif;
display: block;
height: 40px;
width: 175px;
text-align: center;
background: #fa7bcf url(gradient.png) 0 center;
border: 1px solid #fcc6f5;
text-shadow: #fdd1ef 0 1px 2px;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
box-shadow: #7c0240 0 1px 2px;
-moz-box-shadow: #7c0240 0 1px 2px;
-webkit-box-shadow: #7c0240 0 1px 2px;
transition: background .25s linear .1s;
-webkit-transition: background .25s linear .1s;
}

.valentine_button:hover {
background: #fbadde url(gradient.png) 0 center;
transition: background .25s linear;
-webkit-transition: background .25s linear;
}

Miłego korzystania!