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.

Demo knop

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.

Gebruik:

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: Download deze code  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.

 
terug

html-398; Laatste wijziging: 1 mei 2020