Geanimeerde button rollover met CSS I
Hieronder zie je een button met een subtiel kleurverloop. Als je er met de muis overheen gaat, verandert het verloop een beetje. 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.
- Er worden twee items besproken:
- De werking van de CSS.
- Gebruiken in eigen site.
- De werking van de CSS
- De knop is een <a>tag met de class knop1. 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 hoog als de knop zelf:
background-size: 100% 200%; - Het kleurverloop van donker naar licht bruin 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 15 px. Deze situatie treedt ook op
als de knop de focus heeft of als de link actief is:
.knop1:hover,.knop1:focus,.knop1:active {
background-position: 0 -15px;
} - 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,3 seconden duurt en geldt voor alle onderdelen van de class
knop1, dat wil zeggen: de achtergrond van de link, dus van de knop:
transition: all .3s linear; - Om problemen met de achtergrondkleur te omzeilen in browsers die linear-gradient niet ondersteunen, is ook een
uniforme achtergrondkleur gedefinieerd:
background: #b85a35;
Deze staat vóór de declaratie van het kleurverloop.
- Inbouwen in je site
- Neem het style-block over, pas eventueel de kleur aan. Zoek daarbij een tweede kleur 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 ziet er als volgt uit:
(Zet dit style-block in de <HEAD>).
<style>
.knop1 {
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: #b85a35;
background: linear-gradient(#b85a35, #e6aa93);
background-size: 100% 200%;
transition: all .3s linear;
}
.knop1:hover, .knop1:focus, .knop1:active {
background-position: 0 -15px;
}
</style>
(Zet dit in de <BODY>, op de plaats waar de knop moet verschijnen)
<div align="center">
<a href="#" class="knop1" onclick="return false;">Demo knop</a>
</div>
Downloaden:
Druk op de knop:
File: voorb398.zip, 591 bytes.
Opmerking:
Drie andere uitvoeringen van deze knop vind je in de items Geanimeerde button rollover met CSS II,
Geanimeerde button rollover met CSS III,
Geanimeerde button rollover met CSS IV en
Geanimeerde button rollover met CSS V.
Inspiratie: Webdesigner Magazine 54, pag. 27.
Dit blad wordt sinds eind november 2017 niet meer gemaakt.
