Geanimeerde button rollover met CSS IV
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 knop4. 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 (radial-gradient). Het is wel mogelijk de afmetingen van de achtergrond te veranderen. 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 even en breed hoog als de knop zelf:
background-size: 100% 100%; - Het kleurverloop wordt horizontaal en verticaal gecentreerd:
background-position: center center; - Het kleurverloop van donker naar licht blauw is dus even hoog als de knop.
- Als de muis boven de knop zweeft wordt het kleurverloop naar verticaal uitgerekt. De achtergrond wordt 2× zo hoog
gemaakt. Deze situatie treedt ook op als de knop de focus heeft of als de link actief is:
.knop4:hover,.knop4:focus,.knop4:active {
background-size: 100% 200%;
} - De uitgerekking blijft aanwezig totdat de muis de knop verlaat, de knop de focus verliest of de link inactief wordt.
- Het uitrekken van de de achtergrond zelf wordt uitgevoerd in een lineaire beweging die 0,4 seconden duurt en geldt voor
alle onderdelen van de class knop4, dat wil zeggen: de achtergrond van de link, dus van de knop:
transition: all .4s linear; - Om problemen met de achtergrondkleur te omzeilen in browsers die linear-gradient niet ondersteunen, is ook een
uniforme achtergrondkleur gedefinieerd:
background: #36dac9;
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 sadial-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>
.knop4 {
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: #36dac9;
background: radial-gradient(#36dac9, #36dac9, #a2f6ed, #a2f6ed);
background-position: center center;
background-size: 100% 100%;
transition: all .4s linear;
}
.knop4:hover, .knop4:focus, .knop4:active {
background-size: 100% 200%;
}
</style>
(Zet dit in de <BODY>, op de plaats waar de knop moet verschijnen)
<div align="center">
<a href="#" class="knop4" onclick="return false;">Demo knop</a>
</div>
Downloaden:
Druk op de knop:
File: voorb407.zip, 597 bytes.
Opmerking:
Drie 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 IIIen
Geanimeerde button rollover met CSS V.
Inspiratie: Webdesigner Magazine 54, pag. 27.
Dit blad wordt sinds eind november 2017 niet meer gemaakt.
