Buttony, ach buttony

Nie raz na stronach można zobaczyć ładne przyciski. Zazwyczaj wykonywane są w postaci grafiki związanej z layoutem strony WWW ale niekoniecznie musi tak być. Jeśli mamy linki, które chcielibyśmy przedstawić w postaci przycisków to możemy tego dokonać z pomocą CSS.

Załóżmy, że chcemy mieć śliczny przycisk „uruchom” w kolorze zielonym. Rozwiązaniem pierwszym jest zastosowanie obrazka. No ale obrazek trzeba zrobić w programie graficznym lub wykorzystać jakiś „stockowy”. Innym rozwiązaniem jest zrobienie obrazka w samym HTML i CSS. Poniżej przedstawiam przykłady jak można to zrobić.

Po pierwsze tworzymy link:

<a href="test.php">uruchom</a>

co daje nam:
uruchom
No ale tu nie ma buttona, ktoś może powiedzieć. Ma rację, jeszcze nie ma ale za chwilę będzie. Dodajemy styl do linku, który po „ostylowaniu” zmieni się w button, którego wygląd będzie zależny od tego co zamieścimy w opisie klasy „uruchom1”.

<a href="test.php" class="uruchom1">uruchom</a>

uruchom

Definicja klasy „uruchom1”:

/* uruchom1 */
a.uruchom1 {
    font-size: 20px;
    display: block;
    width: 120px;
    height: 40px;
    margin: 0;
    padding: 0;
    color: white;
    background-color: green;
    border: 0px solid #000;
    text-align: center;
    text-decoration: none;
    font-family: sans-serif;
}

a.uruchom1:hover, a.uruchom1:active {
    color: #00FF00;
}

No ale tak po prawdzie w tej chwili ten przycisk nie jest zbyt atrakcyjny. By go trochę uatrakcyjnić musimy odrobinę zmienić to co mamy w definicji stylu CSS.

<a href="#" class="uruchom2">uruchom</a>

uruchom

No to trochę zmieniliśmy go poniższą definicją stylu:

/* uruchom2 */
a.uruchom2{
    font-size: 20px;
    display: block;
    width: 120px;
    height: 40px;
    margin: 0;
    padding: 0;
    color: white;
    background-color: green;
    border: 2px solid #FFF;
    text-align: center;
    text-decoration: none;
    font-family: sans-serif;
    border-radius: 6px;
    box-shadow: 0 0 5px #777;
}

a.uruchom2:hover, a.uruchom2:active {
    color: #000;
    background-color: green;
    border: 2px solid #000;
}

No to teraz jeszcze bardziej zmienimy przycisk, dodamy ładne cieniowane tło i trochę ruchomości.

<a href="#" class="uruchom3">uruchom</a>

uruchom

Dokonaliśmy to poniższym kodem

/* uruchom3 */
a.uruchom3{
    font-size: 14px;
    display: block;
    width: 120px;
    height: 40px;
    margin: 0;
    padding-top: 5px;
    padding-left: 10px;
    color: white;
    background: linear-gradient(#000020,#0000AA);
    border: 2px solid #FFF;
    text-align: left;
    text-decoration: none;
    font-family: sans-serif;
    border-radius: 6px;
    box-shadow: 0 0 5px #777;
}

a.uruchom3:hover, a.uruchom3:active {
    color: #FFF;
    background: linear-gradient(#0000AA,#000020);
    border: 2px solid #FFF;
    box-shadow: 0 0 2px #333;
    position: relative;
    top: 2px;
    left: 2px;
}

No i jeszcze kilka przykładów przycisków:
A001 A002