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? :)
