Pouze tento týden sleva až 80 % na e-learning týkající se Pythonu. Zároveň využij akce až 80 % zdarma při nákupu kreditů. Více informací:
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Neaktivní uživatel:28.11.2016 10:47

Hoj,

chci udělát něco jako tohle GIF
Mám to teď v CSS3 animate + trochu JS, ale animate není podporován v některých prohlížečích.
Může mi někdo pomoct s JS verzí?

<button id="btn" class="button_sliding_bg">
Button
</button>
.button_sliding_bg {
    visibility: hidden;
    padding: 12px 17px;
    margin: 25px;
    font-family: 'OpenSansBold', sans-serif;
    border: 3px solid #31302B;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 2px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    animation: animate-out 0.5s 1;
    animation-fill-mode: forwards;
}

.button_sliding_bg:hover {
    animation: animate-in 0.5s 1;
    animation-fill-mode: forwards;
}

@keyframes animate-in {
    0% {
        box-shadow: inset 0 0 0 0 #31302B;
        color: #31302B;
        background: #FFF;
    }
    100% {
        box-shadow: inset 100px 0 0 0 #31302B;
        color: #FFF;
        background: #FFF;
    }
}

@keyframes animate-out {
    0% {
        box-shadow: inset 0 0 0 0 #FFF;
        background: #31302B;
        color: #FFF;
    }
    100% {
        box-shadow: inset 100px 0 0 0 #FFF;
        background: #31302B;
        color: #31302B;
    }
}
window.setTimeout(function() {
document.getElementById('btn').style.visibility = 'visible';
}, 400);

Díky

Editováno 28.11.2016 10:49
Odpovědět
28.11.2016 10:47
Neaktivní uživatelský účet
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Neaktivní uživatel:28.11.2016 10:57

https://jsfiddle.net/gmbvgo31/
Takhle je to aspoň s náhledem :)

Nahoru Odpovědět
28.11.2016 10:57
Neaktivní uživatelský účet
Avatar
Ján Timoranský
Tvůrce
Avatar
Ján Timoranský:28.11.2016 11:12

Nech sa páči, snáď to funguje podľa predstavy. jsFiddle

Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
Nahoru Odpovědět
28.11.2016 11:12
Find what you love and let it kill you.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 3 zpráv z 3.