Efekty dla przycisków/buttonów

środa, 22 sierpnia 2018


Jakiś czas temu, była opublikowana instrukcja na temat tego, jak zrobić własne buttony/przyciski, więc pomyślałam sobie, że głupio tak tą instrukcję zostawić i nie zrobić nic dodatkowego do niej, a i przy okazji do innych "klikaczy" na naszym blogu.

Przedstawię Wam dzisiaj, 6 efektów dla buttonów z powyższej instrukcji oraz innych przycisków na naszym blogu np. czytaj więcej, etykiety etc. Mogę Wam powiedzieć, że jest to pierwsza część tej instrukcji i jeszcze kilka takich efektów na pewno się pojawi :)

Nie będziemy musieli nic robić w kodzie HTML szablonu, wystarczy nam tylko arkusz CSS.

Motyw - dostosuj - zaawansowane - dodaj arkusz CSS

Zapamiętaj!
Wszystkie elementy w analizie kodu, zaznaczone na kolor i pogrubione są zmienne.

Efekt 1


Efekt pierwszy, jest idealny, jeśli chcemy, aby nasz button/przycisk na coś wskazywał. Po wskazaniu na button kursorem, pojawi nam się mała strzałka.

Podgląd

Najedź na mnie i zobacz jaki mam efekt



Zapamiętaj!
Niektóre selektory nie występują razem z kropką tylko z tzw. kratką. Czyli np. .selektor lub #selektor

Analiza fragmentu kodu, który można zmienić:

.selektor {
position:relative;
display:inline-block;
margin: 10px 5px 10px; - marginesy
padding:10px 30px; - marginesy wewnętrzne
border-bottom:none;
-webkit-border-radius:0.333em; - zaokrąglenie narożników 
-moz-border-radius:0.333em;
border-radius:0.333em; 
color:#fff!important; - kolor fontu/czcionki
text-transform:uppercase; - styl tekstu (tutaj ustawiony na litery drukowane)
font-size:14px!important; - wielkość fontu/czcionki
line-height:24px!important;
letter-spacing: 1px; - odległość między literami
cursor:pointer;
font-family: Open Sans; - rodzaj fontu/czcionki
}
.selektor {
background: #000; - kolor tła buttonu/przycisku
}
.selektor:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  border-style: solid;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  left: calc(50% - 10px);
  top: 0;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #000 transparent; - kolor strzałki
}

Efekt 2


Najedź na mnie i zobacz jaki mam efekt



Analiza fragmentu kodu, który można zmienić:

.selektor { position:relative;
display:inline-block;
 margin: 10px 5px 10px;  - marginesy
padding:10px 30px;  - marginesy wewnętrzne
border-bottom:none;
 color:#fff!important; - kolor fontu/czcionki
 text-transform:uppercase; - styl tekstu (tutaj ustawione na litery drukowane)
 font-size:14px!important; - wielkość fontu/czcionki
line-height:24px!important;
letter-spacing: 1px;  - odległość między literami
cursor:pointer;
font-family: Nunito; } - rodzaj fontu/czcionki
 .selektor { background: #78d9d3; } - kolor tła
 .selektor:before { content: '';
 position: absolute;
 border: #78d9d3 solid 4px; - kolor i grubość obramowania
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -webkit-transition-property: top, right, bottom, left;
 transition-property: top, right, bottom, left; }

Efekt 3


Najedź na mnie i zobacz jaki mam efekt



Analiza fragmentu kodu, który można zmienić: 

.selektor {
position:relative;
display:inline-block;
margin: 10px 5px 10px; - marginesy
padding:10px 30px; - marginesy wewnętrzne
border-bottom:none;
color:#fff!important; - kolor fontu/czcionki
text-transform:uppercase; - styl tekstu
font-size:14px!important; - wielkość fontu/czcionki
line-height:24px!important;
letter-spacing: 1px; - odległość między litterami
cursor:pointer;
font-family: Nunito; - rodzaj fontu/czcionki
}
.selektor {
background: #444; - kolor tła
}

Efekt 4


Najedź na mnie i zobacz jaki mam efekt




Analiza fragmentu kodu, który można zmienić:

.selektor {
position:relative;
display:inline-block;
margin: 10px 5px 10px; - marginesy
padding:10px 30px; - marginesy wewnętrzne
border-bottom:none;
color:#fff!important; - kolor fontu/czcionki
text-transform:uppercase; - styl tekstu
font-size:14px!important; - wielkość fontu/czcionki
line-height:24px!important;
letter-spacing: 1px; - odstęp między literami 
cursor:pointer;
font-family: Nunito; - rodzaj fontu/czcionki
}
.selektor {
background: #ffe599; - kolor tła
}
.selektor {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  background: #f1c232; - kolor drugiego tła
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.selektor:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffe599; - kolor pierwszego tła
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.selektor:hover, .selektor:focus, .selektor:active {
  color:  #fff; - kolor fontu/czcionki
}

Efekt 5


Najedź na mnie i zobacz jaki mam efekt



Analiza fragmentu kodu, który można zmienić:

.selektor {
position:relative;
display:inline-block;
margin: 10px 5px 10px; - marginesy
padding:10px 30px; - marginesy wewnętrzne
border-bottom:none;
color:#000!important; - kolor fontu/czcionki
text-transform:uppercase; - styl tekstu
font-size:14px!important; - rozmiar fontu/czcionki
line-height:24px!important;
letter-spacing: 1px; - odstęp między literami
cursor:pointer;
font-family: Nunito; - rodzaj fontu/czcionki
}
.selektor {
background: #fff; - kolor tła
}

Efekt 6

Najedź na mnie i zobacz jaki mam efekt




Analiza fragmentu kodu, który można zmienić:

.selektor {
position:relative;
display:inline-block;
margin: 10px 5px 10px; - marginesy
padding:10px 30px; - marginesy wewnętrzne
border-bottom:none;
color:#fff!important; - kolor fontu/czcionki
text-transform:uppercase; - styl tekstu
font-size:14px!important; - wielkość fontu/czcionki
line-height:24px!important;
letter-spacing: 1px; - odstęp między literami
cursor:pointer;
font-family: Nunito; - rodzaj fontu/czcionki
}
.selektor {
background: #9fc5e8; - kolor tła
}

Który efekt Wam się najbardziej podoba? :)

Brak komentarzy:

Prześlij komentarz

- Komentarze takie jak: spam, obserwacja za obserwacje, prośby o klikanie w banery etc. zostają usuwane - ZAPAMIĘTAJ! MÓJ BLOG TO NIE TABLICA OGŁOSZEŃ
- Weryfikacja obrazkowa wyłączona

Copyright © Szablon wykonany przez My pastel life