Jak zrobić buttony w CSS? cz1.

Jak zrobić buttony w CSS?

W dzisiejszy poradniku omówię – Jak zrobić buttony w CSS?  W 5-ciu krokach. Ale nie będą to takie buttony w CSS jak z jakiegoś generatora na stronie WWW. Raczej takie przypominające bardziej grafię z programu graficzne, ale w czystym kodzie CSS.

Co będzie potrzebne, żeby napisać buttony w CSS? Na pewno edytor kodu, ja używam Notepada++. Jeśli nie wiesz czym jest edytor kodu zajrzyj do Kurs HTML(5) – od podstaw. Tam również omawiam kod HTML.

Przygotowałam kod HTML, którym zrobimy od podstaw trzy buttony w CSS, bez użycia jakiejkolwiek grafiki.

<!DOCTYPE html>
<html lang="pl">

    <head>
        <meta charset="UTF-8" />
        <link href='https://fonts.googleapis.com/css?family=Kaushan+Script|Great+Vibes|Bowlby+One+SC|Ubuntu:500&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" type="text/css" href="style.css"/>
        <title> Buttony w CSS </title>
    </head>
    
    <body>
        
        <head><h1>Poradnik - Jak zrobić buttony w CSS? </h1></head>
        
        <!-- Pierwszy Button -->
        <section>
            <h2>Przykładowy przycisk 1</h2>
            <button class="jeden"> Kup teraz </button>
        
        </section>
        
                <!-- Drugi Button -->
        <section>
            <h2>Przykładowy przycisk 2</h2>
            <button class="dwa"> Idź dalej </button>
        
        </section>
        
                <!-- Trzeci Button -->
        <section>
            <h2>Przykładowy przycisk 3</h2>
            <button class="trzy"> >> Zapisz się </button>
        
        </section>
        <footer>
            <h3>&copy; Blog.rosedesigm.pl - Poradnik - Jak zrobić buttony w CSS?</h3>
        </footer>
    </body>
    
</html>

Podstawowy kod CSS:

body
{
    background: #f1f1eb;
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Ubuntu', sans-serif;
    font-size: 16px;
}
h1, h2, h3
{
    color: #6ab6cc;
    text-align: center;
    font-family: 'Ubuntu', sans-serif;
}
h1
{
    font-size: 3em;
}
h2
{
    font-size: 1,8em;
    margin: 50px 0;
}
section 
{
    text-align: center;
}
footer
{
    padding:60px 0 0;
}

Zakładam, że tego kodu już nie muszę omawiać. Jeśli nie wiesz co znaczą te reguły CSS  zajrzyj >> Jak zrobić stronę www?

Wyjaśnię tylko dwie rzeczy, których nie było w kursie HTML(5) – Od podstaw:

  1.  W sekcji HEAD zostały zaimportowane fonty.
  2. Do stworzenia przycisków (buttonów) użyjemy nowego znacznika w HTML button, bo do tego on służy.

Zaimportować foty na stronę można dopiero od CSS3. Wcześniej byliśmy skazani na nudne podstawowe kroje pisma, które użytkownik miał zainstalowane w systemie operacyjnym.

Jeśli chcieliśmy mieć inne musieliśmy użyć grafiki z tym fontem na stronie. Te czasu to już przeszłość.
Importowanie fontów pozwala nam użyć w zasadzie dowolnego kroju pisma na stronie, pod warunkiem, że jego licencja na to pozwala.

Użytkownik nie musi nawet mieć go w systemie, ponieważ ładujemy go z naszego lub zewnętrznego serwera. W tym przypadku Google Fonts.

Do poradnika – Jak zrobić buttony w CSS? wybrałam 4 fonty:
* Ubuntu
* Bowlby One SC
* Great Vibes
* Kaushan Script

Wszystkie normalnie grubości czyli 400.

Możesz je wybrać używając wyszukiwarki lub przeglądając listę. Upewnij się, że w opcji Script: masz zaznaczone Latin Extended, ta opcja pozwala na wyświetlanie m.i.m polskich „ogonków”.

Jeśli już znajdziesz odpowiedni font/fonty kliknij ADD TO COLLECTION – czyli dodaj do kolekcji.
Przyciskiem USE przechodzimy do wybranej kolekcji. Mamy informacje jak dodać kolekcje do pliku HTML i stylów CSS.

Więcej na temat fontów na stronie napiszę w osobnym artykule.

Jak zrobić buttony w CSS?
Przyciski bez stylów CSS w przeglądarce.

Wróćmy do kodu:

Krok 1

*  BUTTON 1 */
section button.jeden
{
    font-family: 'Bowlby One SC', cursive;
    font-size: 26px;
    line-height: 26px;
    text-align: center;
    text-shadow: 3px 3px 1px #666;
}

Dodaliśmy rodzaj fontu, jego wielkość, wyśrodkowaliśmy tekst w pionie i poziomie oraz dodaliśmy mu cień.

Jak zrobić buttony w CSS?

Krok 2

 background: rgba(252,162,37,1);
 background: -moz-linear-gradient(top, rgba(252,162,37,1) 0%, 
             rgba(252,162,37,1) 44%, rgba(255,150,4,1) 51%, rgba(255,150,4,1) 71%, 
             rgba(255,150,4,1) 100%);
 background: -webkit-gradient(left top, left bottom, color-stop(0%, 
             rgba(252,162,37,1)), color-stop(44%, rgba(252,162,37,1)), color-stop(51%, 
             rgba(255,150,4,1)), color-stop(71%, rgba(255,150,4,1)), color-stop(100%, 
             rgba(255,150,4,1)));
 background: -webkit-linear-gradient(top, rgba(252,162,37,1) 0%, rgba(252,162,37,1)44%, 
              rgba(255,150,4,1) 51%, rgba(255,150,4,1) 71%, rgba(255,150,4,1) 100%);
 background: -o-linear-gradient(top, rgba(252,162,37,1) 0%, rgba(252,162,37,1) 44%, 
              rgba(255,150,4,1) 51%, rgba(255,150,4,1) 71%, rgba(255,150,4,1) 100%);
 background: -ms-linear-gradient(top, rgba(252,162,37,1) 0%, rgba(252,162,37,1) 44%, 
             rgba(255,150,4,1) 51%, rgba(255,150,4,1) 71%, rgba(255,150,4,1) 100%);
 background: linear-gradient(to bottom, rgba(252,162,37,1) 0%, rgba(252,162,37,1) 44%, 
             rgba(255,150,4,1) 51%, rgba(255,150,4,1) 71%, rgba(255,150,4,1) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fca225', 
         endColorstr='#ff9604', GradientType=0 );

Nadaliśmy przyciskowi odpowiedni kolor, lekki gradient pomarańczowy.
Do stworzenia gradientu można użyć generatora, żeby nie pisać takiej ilości kodu. Generator.

Jak zrobić buttony w CSS?
Przycisk po dodaniu koloru tła.

Widzimy, że nadał nie powala swoim wyglądem.

Krok 3

    color: #fff; 
    border-radius: 10px 35px 35px 10px;

Zmieńmy kolor tekstu na biały i zróbmy button nieco okrąglejszy.

Jak zrobić buttony w CSS?

Zaokrąglenie przycisku, to następujące wartości. Lewy górny róg = 10px, Prawy górny gór = 35px. Prawy dolny róg = 35px, Lewy dolny róg = 10px.

Krok 4

Nadajmy przyciskowi jeszcze margines wewnętrzny, że miał więcej luzu, powiedzmy 10px, Jakąś niewielką, pół przezroczystą ramkę w koło buttona. Można jeszcze zrobić cień pod przyciskiem.

    padding: 10px;
    border: 2px solid rgba(200, 119, 5, 0.5);
    box-shadow: 2px 2px 10px #333;
Jak zrobić buttony w CSS?
Gotowy Button, bez stanu hover

Krok 5

Teraz zostało nam okodować zachowanie przycisku w stanie hover lub focus.

section button.jeden:hover, section button.jeden:focus
{
    background: rgba(255,150,4,1);
    background: -moz-linear-gradient(top, rgba(255,150,4,1) 0%, rgba(255,150,4,1) 29%, 
                rgba(255,150,4,1) 49%, rgba(252,162,37,1) 56%, rgba(252,162,37,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,150,4,1))
                ,color-stop(29%, rgba(255,150,4,1)), color-stop(49%, rgba(255,150,4,1)), 
             color-stop(56%, rgba(252,162,37,1)), color-stop(100%, rgba(252,162,37,1)));
    background: -webkit-linear-gradient(top, rgba(255,150,4,1) 0%, rgba(255,150,4,1) 29%,
                rgba(255,150,4,1) 49%, rgba(252,162,37,1) 56%, rgba(252,162,37,1) 100%);
    background: -o-linear-gradient(top, rgba(255,150,4,1) 0%, rgba(255,150,4,1) 29%, 
                rgba(255,150,4,1) 49%, rgba(252,162,37,1) 56%, rgba(252,162,37,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,150,4,1) 0%, rgba(255,150,4,1) 29%, 
                rgba(255,150,4,1) 49%, rgba(252,162,37,1) 56%, rgba(252,162,37,1) 100%);
    background: linear-gradient(to bottom, rgba(255,150,4,1) 0%, rgba(255,150,4,1) 29%, 
                rgba(255,150,4,1) 49%, rgba(252,162,37,1) 56%, rgba(252,162,37,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9604', 
    endColorstr='#fca225', GradientType=0 );
    opacity: 0.95;
    cursor: pointer;
}

W tym przypadku odwrócimy mu tylko kolory (w generatorze można to zrobić jednym kliknięciem), nadamy bardzo lekko przezroczystość, i kursor łapki po najechaniu.

Jak zrobić buttony w CSS?
Gotowy button

W następnej części pokażę jak zakodować pozostałe dwa buttony w CSS, żeby ten materiał nie był za długi.

Pozdrawiam.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *