DIY #8 Animowany lśniący przycisk przy użyciu CSS | DailyWeb.pl - codziennie o sieci

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

Opublikowano 2 lata temu - 5


Czołem.

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

Na początek potrzebujemy <a>:

<a href="#" class="button">DailyWeb</a>

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

1

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

.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;
}

2

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

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

3

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.

.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;
}

 

4Efekt :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.

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

5

No i na sam koniec:

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

6

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

Zapraszam do zapoznania się z wcześniejszymi odcinkami serii