Geanimeerde button rollover met CSS V
Hieronder zie je een button met een subtiel kleurverloop. Als je er met de muis overheen gaat, schuift het kleurverloop naar links. Als je de button aantikt/aanklikt gaat deze niet meer terug naar de oorspronkelijke stand. Dat blijft zo totdat je ergens anders klikt/tikt. De knop zelf doet overigens niets.
Deze knop is helemaal gemaakt met CSS. Er komt dus geen <input>- of <button>-tag aan te pas. Er
wordt ook geen JavaScript bij gebruikt.
De code staat onderaan de pagina. Je kunt hem ook downloaden om zelf te gebruiken.
Ik heb dit effect gevonden op colorion.co. Daar is het helemaal toegespitst op gebruik met het platform Bootstrap 4.0. Voor deze site is die afhankelijkheid verwijderd.
- Er worden twee items besproken:
- De werking van het script.
- Gebruiken in je eigen site.
- De werking van de CSS
- De knop is een <a>tag met de class knop5. Deze class bevat alle informatie voor het opmaken van de knop in "ruststand". Zie de code onderaan deze bladzijde.
- Het is niet mogelijk een animatie uit te voeren op een kleurverloop (linear-gradient). Het is wel mogelijk de plaats van de achtergrond te laten bewegen. Dat is wat hier in de knop gebeurt. Feitelijk is dit dus een trucje, waardoor het lijkt alsof de achtergrond verandert.
- De achtergrond van de knop is twee keer zo breed als de knop zelf:
background-size: 200% auto;
Met auto wordt de hoogte automatisch aangepast aan de hoogte van de knop. - Het kleurverloop van donker naar licht is dus hoger dan de hoogte van de knop; een deel van het kleurverloop is niet zichtbaar.
- Als de muis boven de knop zweeft wordt het kleurverloop naar boven verschoven over 102% van de hoogte van de knop. Deze
situatie treedt ook op als de knop de focus heeft of als de link actief is:
.knop5:hover,.knop5:focus,.knop5:active {
background-position: right center;
} - De verschuiving blijft aanwezig totdat de muis de knop verlaat, de knop de focus verliest of de link inactief wordt.
- De verschuiving zelf uitgevoerd in een lineaire beweging die 0,5 seconden duurt en geldt voor alle onderdelen van de class
knop5, dat wil zeggen: de achtergrond van de link, dus van de knop:
transition: all .5s linear; - Om problemen met de achtergrondkleur te omzeilen in browsers die linear-gradient niet ondersteunen, is ook een
uniforme achtergrondkleur gedefinieerd:
background: #f09819;
Deze staat vóór de declaratie van het kleurverloop.
- Inbouwen in je site
- Neem het style-block over, pas eventueel de kleuren aan. Zoek drie kleuren bij elkaar zodat je een subtiel verloop kunt maken met linear-gradient.
- De knop moet je zelf positioneren in je document. In dit voorbeeld is de knop gecentreerd in het midden van de regel.
- Voor je eigen toepassing moet je natuurlijk wel de <a>-tag aanpassen. Vervang # door een echte URL
en verwijder
onclick="return false;"
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code van het voorbeeld ziet er als volgt uit:
(Zet dit in de <HEAD>).
<style>
.knop5:link, .knop5:visited {
display: block;
width: 180px; height: 40px; margin: 20px;
line-height: 40px; font-size: 20px;
color: white; text-decoration: none; text-align: center;
border-radius: 10px;
border: solid 2px rgba(0,0,0,0.2);
box-shadow: rgba(0,0,0,0.3) 1px 1px 3px inset;
background-size: 200% auto;
transition: all .5s linear;
}
.knop5 {
background:#f09819;
background-image: linear-gradient(to right,
#ff512f 0%, #f09819 51%, #ff512f 100%);
}
.knop5:hover,
.knop5:focus,
.knop5:active { background-position: right center; }
</style>
(Zet dit in de <BODY>, op de plaats waar de knop moet verschijnen).
<div align="center">
<a href="#" class="knop5" onclick="return false;">Demo knop</a>
</div>
Downloaden:
Druk op de knop:
File: voorb040.zip, 622 bytes.
Opmerking:
Andere uitvoeringen van deze knop vind je in de items Geanimeerde button rollover met CSS I,
Geanimeerde button rollover met CSS II,
Geanimeerde button rollover met CSS III en
Geanimeerde button rollover met CSS IV.
