Geanimeerde button rollover met CSS III
Hieronder zie je een button met een subtiel ribbeltjespatroon. Als je er met de muis overheen gaat, verandert het patroon. 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 knop3. 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 lengte-breedteverhouding aan te passen. 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 strekt zich uit over de volle breedte van de knop. De hoogte van de knop is maar 10% van de
hoogte van de knop. Doordat dit in verticale richting wordt herhaald, ontstaat het ribbeltjespatroon:
background-size: 100% 100%; - Als de muis boven de knop zweeft wordt het ribbeltjespatroon veranderd naar 50% van de breedte en de volle hoogte:
.knop3:hover,.knop3:focus,.knop3:active {
background-size: 50% 100%;
} - 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
knop3, 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: #31a758;
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 in de <HEAD>).
<style>
.knop3:link, .knop3: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: #31a758;
background: radial-gradient(#31a758, #95e4af);
background-size: 100% 10%;
transition: all .3s linear;
}
.knop3:hover, .knop3:focus, .knop3:active {
background-size: 50% 100%;
}
</style>
(Zet dit in de <BODY>, op de plaats waar de knop moet verschijnen)
<div align="center">
<a href="#" class="knop3" onclick="return false;">Demo knop</a>
</div>
Downloaden:
Druk op de knop:
File: voorb404.zip, 594 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 IV en
Geanimeerde button rollover met CSS V.
Inspiratie: Webdesigner Magazine 54, pag. 27.
Dit blad wordt sinds eind november 2017 niet meer gemaakt.
