Jak zrobić buttony w CSS? cz2.

Jak zrobić buttony w CSS?

W poprzedniej części Jak zrobić button w CSS?  W 5-ciu krokach. Omówiłam zrobienie pierwszego z 3 buttonów z CSS. Jeśli nie czytałeś Jak zrobić buttony w CSS? cz1. Dzisiaj omówię pozostałe dwa.

Jeszcze szybkie przypomnienie co będzie potrzebne, żeby napisać button 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.

Paczkę z plikami możesz tu pobrać.

Jak zrobić button w CSS?
Tak button nr 2 wygląda teraz

Krok 1

/*  BUTTON 2 */
section button.dwa
{
    font-family: 'Great Vibes', cursive;
    font-size: 40px;
    line-height: 40px;
}

Ustawiliśmy krój pisma na Great Vibes, wielkość fontu i wysokość linii na 40px.

Jak zrobić button w CSS?
Teraz button wygląda tak

Krok 2

background: rgba(73,155,234,1);
background: -moz-linear-gradient(top, rgba(73,155,234,1) 0%, 
             rgba(19,207,207,1) 50%, rgba(32,124,229,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(73,155,234,1)), 
             color-stop(50%, rgba(19,207,207,1)), color-stop(100%, rgba(32,124,229,1)));
background: -webkit-linear-gradient(top, rgba(73,155,234,1) 0%, rgba(19,207,207,1) 50%, 
             rgba(32,124,229,1) 100%);
background: -o-linear-gradient(top, rgba(73,155,234,1) 0%, rgba(19,207,207,1) 50%, 
             rgba(32,124,229,1) 100%);
background: -ms-linear-gradient(top, rgba(73,155,234,1) 0%, rgba(19,207,207,1) 50%, 
             rgba(32,124,229,1) 100%);
background: linear-gradient(to bottom, rgba(73,155,234,1) 0%, rgba(19,207,207,1) 50%, 
            rgba(32,124,229,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', 
        endColorstr='#207ce5', GradientType=0 );

Gradientowe tło przycisku (można je zrobić w generatorze -> patrz Jak zrobić button w CSS cz.1)

Jak zrobić button w CSS?
Tak wygląda button z tłem

krok 3

color: #fff;
text-align: center; 
border-radius: 50%;
width: 120px;
height: 120px;
text-shadow: 3px 3px 1px #666;
box-shadow: 2px 2px 10px #333;

Kolor tekstu biały, wyśrodkowanie tekstu, border-radius 50% – sprawia, że przycisk jest idealnie okrągły, wysokość i szerokość buttona 120px, cień pod testem i cień pod przyciskiem.

Jak zrobić button w CSS?
Gotowy Button, bez stanu hover

Krok 4

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

section button.dwa:hover, section button.dwa:focus
{
 background: rgba(32,124,229,1);
 background: -moz-linear-gradient(top, rgba(32,124,229,1) 0%, rgba(19,207,207,1) 50%, 
             rgba(73,155,234,1) 100%);
 background: -webkit-gradient(left top, left bottom, color-stop(0%,rgba(32,124,229,1)), 
             color-stop(50%, rgba(19,207,207,1)), color-stop(100%,rgba(73,155,234,1)));
 background: -webkit-linear-gradient(top, rgba(32,124,229,1) 0%, rgba(19,207,207,1) 50%,  
             rgba(73,155,234,1) 100%);
 background: -o-linear-gradient(top, rgba(32,124,229,1) 0%, rgba(19,207,207,1) 50%, 
             rgba(73,155,234,1) 100%);
 background: -ms-linear-gradient(top, rgba(32,124,229,1) 0%, rgba(19,207,207,1) 50%, 
             rgba(73,155,234,1) 100%);
 background: linear-gradient(to bottom, rgba(32,124,229,1) 0%, rgba(19,207,207,1) 50%, 
             rgba(73,155,234,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#207ce5', 
endColorstr='#499bea', GradientType=0 );
}
Jak zrobić button w CSS?
Odwróciliśmy kolory tła po najechaniu na nie myszką.

Krok 5

transform:scale(1.2,1.2);
opacity: 0.95;
cursor: pointer;

Powiększamy przycisk o 20% na najechaniu myszą (transform:scale), przezroczystość ustawiamy na 0.05 i kursor łapka po najechaniu jak przy linkach.

Jak zrobić button w CSS?
Przycisk 3 z domyślnymi stylami CSS

Krok 1

Tym razem zacznijmy od tła buttona.

section button.trzy
{
  background: rgba(241,231,103,1);
  background: -moz-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%,rgba(241,231,103,1)),
               color-stop(100%, rgba(254,182,69,1)));
  background: -webkit-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 
               100%);
  background: -o-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
  background: -ms-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
  background: linear-gradient(to bottom, rgba(241,231,103,1) 0%,rgba(254,182,69,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e767', 
          endColorstr='#feb645', GradientType=0 );

}
Jak zrobić button w CSS?
Button z tłem

Krok 2

font-family: 'Kaushan Script', cursive;
color: #92e506;
font-size: 40px;
line-height: 40px;
text-align: center;

Krój pisma: Kaushan Script, kolor fontu: jasno-zielony, rozmiar fontu i wysokość linii 40px, wyśrodkowanie tekstu w poziomie.

Jak zrobić button w CSS?
Tak wygląda teraz.

Krok 3

border-radius: 20px;
width: 280px;
height: 100px;
border: 5px dashed #fff;

Zaokrąglenie przycisku o 20px, szerokość 280px, wysokość 100px, obramowanie, kropkowane, białe, 5px.

Jak zrobić button w CSS?

Krok 4

transform:rotateZ(-8deg);
text-shadow: 3px 3px 1px #666;
box-shadow: 2px 2px 10px #333;

Obrócenie przycisku o 8 stopni w lewo, cień pod tekstem i cień pod buttonem.

Jak zrobić button w CSS?
Gotowy Button, bez stanu hover.

Krok 5

Stan hover i focus.

section button.trzy:hover, section button.trzy:focus
{
    transform:rotateZ(-3deg);
    color: #7cbd10;
    opacity: 0.95;
    cursor: pointer;
}

Obrócenie przycisku o 3 stopnie w lewo, zmiana koloru buttona na ciemniejszą zieleń, minimalna przezroczystość, łapka kursora myszy.

Jak zrobić button w CSS?
Gotowy button

Tym zakończę kurs. Mam nadzieję, że ta i poprzednia część Ci się przyda, a może nauczyłeś się czegoś nowego o CSS.

Dodaj komentarz

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