Twórczy notatnik: 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

.selektor {
position:relative;
display:inline-block;
margin: 10px 5px 10px;
padding:10px 30px;
border-bottom:none;
-webkit-border-radius:0.333em;
-moz-border-radius:0.333em;
border-radius:0.333em;
color:#fff!important;
text-transform:uppercase;
font-size:14px!important;
line-height:24px!important;
letter-spacing: 1px;
cursor:pointer;
font-family: Nunito;
}
.selektor {
background: #000;
}
.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;
}
.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;
}
.selektor:hover:before, .hvr-bubble-top:focus:before, .hvr-bubble-top:active:before {
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
}

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

.selektor {
position:relative;
display:inline-block;
margin: 10px 5px 10px;
padding:10px 30px;
border-bottom:none;
color:#fff!important;
text-transform:uppercase;
font-size:14px!important;
line-height:24px!important;
letter-spacing: 1px;
cursor:pointer;
font-family: Nunito;
}
.selektor {
background: #444;
}
@-webkit-keyframes selektor {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}
@keyframes selektor {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}
.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);
}
.selektor:hover, .selektor:focus, .selektor:active {
  -webkit-animation-name: q3;
  animation-name: q3;
  -webkit-animation-duration: 0.15s;
  animation-duration: 0.15s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

Efekt 4

Najedź na mnie i zobacz jaki mam efekt

.selektor {
position:relative;
display:inline-block;
margin: 10px 5px 10px;
padding:10px 30px;
border-bottom:none;
color:#fff!important;
text-transform:uppercase;
font-size:14px!important;
line-height:24px!important;
letter-spacing: 1px;
cursor:pointer;
font-family: Nunito;
}
.selektor {
background: #ffe599;
}
.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;
  -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;
  -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;
}
.selektor:hover:before, .selektor:focus:before, .selektor:active:before {
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}

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

.selektor {
position:relative;
display:inline-block;
margin: 10px 5px 10px;
padding:10px 30px;
border-bottom:none;
color:#000!important;
text-transform:uppercase;
font-size:14px!important;
line-height:24px!important;
letter-spacing: 1px;
cursor:pointer;
font-family: Nunito;
}
.selektor {
background: #fff;
}
.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;
}
.selektor:before, .selektor:after {
  pointer-events: none;
  position: absolute;
  content: '';
  left: 0;
  width: 100%;
  box-sizing: border-box;
  background-repeat: no-repeat;
  height: 5px;
  opacity: 0;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: opacity;
  transition-property: opacity;
}
.selektor:before {
  bottom: 100%;
  background: -webkit-radial-gradient(50% 150%, ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
  background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
}
.selektor:after {
  top: 100%;
  background: -webkit-radial-gradient(50% -50%, ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
  background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
}
.selektor:hover:before, .selektor:focus:before, .selektor:active:before, .selektor:hover:after, .selektor:focus:after, .selektor:active:after {
  opacity: 1;
}

.selektor {
position:relative;
display:inline-block;
margin: 10px 5px 10px;
padding:10px 30px;
border-bottom:none;
color:#fff!important;
text-transform:uppercase;
font-size:14px!important;
line-height:24px!important;
letter-spacing: 1px;
cursor:pointer;
font-family: Nunito;
}
.selektor {
background: #9fc5e8;
}
.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;
}
.selektor:before {
  pointer-events: none;
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  top: 0;
  left: 0;
  background: white;
  /* IE9 */
  background: linear-gradient(135deg, white 45%, #aaa 50%, #ccc 56%, white 80%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');
  /*For IE7-8-9*/
  z-index: 1000;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: width, height;
  transition-property: width, height;
}
.selektor:hover:before, .selektor:focus:before, .selektor:active:before {
  width: 25px;
  height: 25px;
}

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

Etykiety: CSS , Tutorial , wpis

Efekty dla przycisków/buttonów

Efekt 1

Efekt 2

Efekt 3

Efekt 4

Efekt 5

2 komentarze:

Archiwum

Etykiety