DIY #8 Animowany lśniący przycisk przy użyciu CSS

Czołem.

Dziś zajmiemy się stworzeniem lśniącego buttona przy użyciu CSSa.

Na początek potrzebujemy <a>:

[code]
<a href="#" class="button">DailyWeb</a>

[/code]

No i mamy klasyczny, niebieski, podkreślony tekst:

Następnie, tworzymy popularny Ghost Button czyli ramka dookoła wyśrodkowanego tekstu, obie rzeczy w ten sam kolor.

[code]
.button{
text-decoration: none;
text-align: center;
color: #3cbabe;
border: 2px solid #3cbabe;
border-radius: 4px;
width: 150px;
line-height: 40px;
display: inline-block;
font-family: Arial;
font-weight: 600;
}
[/code]

Dodajemy odwrotny efekt on hover, tło w kolor, tekst w biel:

[code]
.button:hover{
background-color: #3cbabe;
color: #ffffff;
border-bottom: 2px solid #319598;
}
[/code]

I teraz pobawimy się z efektem lśnienia, póki co robię go czarnym aby był widoczny, używamy :before. W buttonie ustawiamy position: relative, aby ustawić nasz blask. Normalny stan: kształt przed naszym buttonem.

[code]
.button:before {
content: "";
background-color: rgba(0,0,0,0.5);
height: 100%;
width: 40px;
display: block;
position: absolute;
top: 0;
left: -70px;
transform: skewX(-45deg) translateX(0px);
transition: none;
}
[/code]

Efekt :hover – przestawiamy go na 2 stronę i dodajemy transition. W normalnym stanie before ma transition ustawione na none, aby nie było widać „powrotu” blasku w lewą stronę przy zmianie z hover na zwykły.

[code]
.button:hover:before{
transform: skewX(-45deg) translateX(250px);
transition: all 0.4s ease-in;
}
[/code]

No i na sam koniec:

dodajemy do buttona overflow: hidden, aby blask nie wyjeżdżał poza obrys oraz zmieniamy kolor na biały:

Efekt możecie zobaczyć poniżej na JSFiddle:

Zapraszam do zapoznania się z wcześniejszymi odcinkami serii