CSS3 buttons

February 17th, 2013 | 10 min read | CSS, CSS3, HTML5, Web

Naast development hou ik me ook graag bezig met hier en daar wat CSS. In deze tutorial ga ik uitleggen hoe je, zonder afbeeldingen, toch een mooie, moderne button kan maken door gebruik te maken van enkele CSS3 properties.

HTML code

Om de buttons te testen heb ik een HTML pagina aangemaakt met een inline CSS block. De code hiervoor kan je hieronder vinden. Later in deze tutorial ga ik stap voor stap bespreken.

De code:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Button CSS</title>
        <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600" rel="stylesheet" type="text/css" />
        <style type="text/css">
            .btn {
                border: 1px solid #0b54b7;
                border-top: 1px solid #1c80ff;
                border-radius: 4px;
                padding: 7px 17px;
                margin: 5px;

                font-family: "Open Sans", Verdana,"BitStream vera Sans",Helvetica,Sans-serif;
                text-decoration: none;
                font-weight: 600;
                text-shadow: 0px -1px 0px #2d6997;
                color: #FFF;
                font-size: 1em;

                background: #54b4fe; /* Old browsers */
                background: -webkit-linear-gradient(top,       #93d6fe 0%, #54b4fe 1%, #2781c5 100%); /* Chrome10+,Safari5.1+ */
                background:    -moz-linear-gradient(top,       #93d6fe 0%, #54b4fe 1%, #2781c5 100%); /* FF3.6+ */
                background:     -ms-linear-gradient(top,       #93d6fe 0%, #54b4fe 1%, #2781c5 100%); /* IE10+ */
                background:      -o-linear-gradient(top,       #93d6fe 0%, #54b4fe 1%, #2781c5 100%); /* Opera 11.10+ */
                background:         linear-gradient(to bottom, #93d6fe 0%, #54b4fe 1%, #2781c5 100%); /* W3C */
                background:        -webkit-gradient(linear, left top, left bottom, color-stop(0%,#93d6fe), color-stop(1%,#54b4fe), color-stop(100%,#2781c5)); /* Chrome,Safari4+ */

                -webkit-transition: background 0.5s, border 0.5s, -webkit-box-shadow 0.5s; /* Safari and Chrome */
                -moz-transition:    background 0.5s, border 0.5s,         box-shadow 0.5s; /* Firefox 4 */
                -o-transition:      background 0.5s, border 0.5s,         box-shadow 0.5s; /* Opera */
                transition:         background 0.5s, border 0.5s,         box-shadow 0.5s; /* W3C */
            }

            .btn:hover {
                border-color: #094497;
                background: #418bc4; /* Old browsers */
                background: -webkit-linear-gradient(top,       #81bce0 0%, #418bc4 1%, #2780c4 100%); /* Chrome10+,Safari5.1+ */
                background:    -moz-linear-gradient(top,       #81bce0 0%, #418bc4 1%, #2780c4 100%); /* FF3.6+ */
                background:     -ms-linear-gradient(top,       #81bce0 0%, #418bc4 1%, #2780c4 100%); /* IE10+ */
                background:      -o-linear-gradient(top,       #81bce0 0%, #418bc4 1%, #2780c4 100%); /* Opera 11.10+ */
                background:         linear-gradient(to bottom, #81bce0 0%, #418bc4 1%, #2780c4 100%); /* W3C */
                background:        -webkit-gradient(linear, left top, left bottom, color-stop(0%,#81bce0), color-stop(1%,#418bc4), color-stop(100%,#2780c4)); /* Chrome,Safari4+ */
            }

            .btn:active, .btn:focus {
                border-color: #093673;
                background: #3571a0; /* Old browsers */
                background: -webkit-linear-gradient(top,       #3571a0 0%, #2780c4 100%); /* Chrome10+,Safari5.1+ */
                background:    -moz-linear-gradient(top,       #3571a0 0%, #2780c4 100%); /* FF3.6+ */
                background:     -ms-linear-gradient(top,       #3571a0 0%, #2780c4 100%); /* IE10+ */
                background:      -o-linear-gradient(top,       #3571a0 0%, #2780c4 100%); /* Opera 11.10+ */
                background:         linear-gradient(to bottom, #3571a0 0%, #2780c4 100%); /* W3C */
                background:        -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3571a0), color-stop(100%,#2780c4)); /* Chrome,Safari4+ */
            }

            .btn:hover, .btn:focus, .btn:active {
                -webkit-box-shadow: 0px 0px 10px rgba(19, 104, 217, 0.75);
                -moz-box-shadow:    0px 0px 10px rgba(19, 104, 217, 0.75);
                box-shadow:         0px 0px 10px rgba(19, 104, 217, 0.75);
            }
        </style>
        <!--[if IE]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>
        <a href="#" class="btn">Test</a>
        <button class="btn">Test</button>
        <input type="button" class="btn" value="Test" />
        <input type="submit" class="btn" value="Test" />
    </body>
</html>

Zoals je kan zien is dit al een redelijk grote CSS voor een eenvoudige knop. In de toekomst zal dit wellicht verbeteren omdat we nu moeten werken met browser-afhankelijke CSS-prefixes zoals

-moz-

,

-o-

en

-webkit-

.

Custom font

Het eerste wat je zou kunnen opvallen is dat ik een externe stylesheet laad alvorens mijn inline CSS block te beginnen, namelijk:

<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600" rel="stylesheet" type="text/css" />

Met deze CSS code kan ik custom font laden, namelijk Open Sans. Open Sans is het font-type dat ik gebruik voor mijn volledige website en geeft het een soort van “Modern UI” look. Meer info kan je hier vinden.

Box model

Het eerste deel in mijn CSS code heeft te maken met de ruimte-vulling dmv

padding

,

margin

en

border

.
Het schema hieronder legt uit waar dat elke ruimte bij wordt geteld en wat het resultaat ervan is.

css-box-model

Wat je voornamelijk moet weten is dat als je een

background

gebruikt, deze achtergrond zowel de oorspronkelijke ruimte (vastgelegd door de content of door de

width

en

height

properties) als de ruimte daardoor omringd via

padding

zal vullen.

Font

Het volgende stuk CSS code heeft te maken met het lettertype. De code hiervoor is:

font-family: "Open Sans", Verdana,"BitStream vera Sans",Helvetica,Sans-serif;
text-decoration: none;
font-weight: 600;
text-shadow: 0px -1px 0px #2d6997;
color: #FFF;
font-size: 1em;

Zoals je kan zien maak ik hier gebruik van meerdere font families. Jouw internet browser zal het eerste lettertype nemen dat beschikbaar is op het systeem. In de meeste moderne browsers zal dit Open Sans zijn, maar browsers die geen custom fonts ondersteunen zullen echter terug vallen op één van de andere fonts.

Mocht er geen van al deze fonts beschikbaar zijn, dan wordt er terug gevallen op eender welk sans-serif font. Uiteindelijk valt elk font-type onder ofwel sans-serif of serif. Het meest bekende sans-serif font is volgens mij Arial, terwijl het meest bekende serif font eerder Times New Roman is.
Het verschil tussen de twee wordt in onderstaande afbeelding uitgelegd.

serif-sansserif

We maken hier ook gebruik van een CSS3

text-shadow

property. Hiermee kunnen we de tekst een schaduw geven. De schaduw die we hier gebruiken is één die een 0px horizontale offset heeft, een -1px verticale offset, 0px blur en de bijgevoegde kleur zal gebruiken.

Dit wilt zeggen dat we een fijn randje boven de letters van onze tekst te zien zullen krijgen. Dit randje is echter enkel beschikbaar voor inner text. Als je dus gebruik maakt van een

input

-element met als type button of submit waarbij het value attribuut de tekst zal vormen, dan zal deze

text-shadow

niet toegepast worden.

Gradient

Als achtergrond gaan we een gradient gebruiken. De gradient zal voor een kleurovergang tussen meerdere kleuren zorgen. De code hiervoor is:

background: #54b4fe; /* Old browsers */
background: -webkit-linear-gradient(top,       #93d6fe 0%, #54b4fe 1%, #2781c5 100%); /* Chrome10+,Safari5.1+ */
background:    -moz-linear-gradient(top,       #93d6fe 0%, #54b4fe 1%, #2781c5 100%); /* FF3.6+ */
background:     -ms-linear-gradient(top,       #93d6fe 0%, #54b4fe 1%, #2781c5 100%); /* IE10+ */
background:      -o-linear-gradient(top,       #93d6fe 0%, #54b4fe 1%, #2781c5 100%); /* Opera 11.10+ */
background:         linear-gradient(to bottom, #93d6fe 0%, #54b4fe 1%, #2781c5 100%); /* W3C */
background:        -webkit-gradient(linear, left top, left bottom, color-stop(0%,#93d6fe), color-stop(1%,#54b4fe), color-stop(100%,#2781c5)); /* Chrome,Safari4+ */

Zoals je kan zien is dit een hoop CSS code voor enkel en alleen een eenvoudige gradient. Dit heeft te maken met het feit dat de meeste browsers nog steeds een prefix gebruiken. De lay-out van de verschillende gradients is echter wel dezelfde.
De gradient is gedefinieerd van boven naar beneden met op 0% een bepaalde kleur, op 1% een andere kleur en die heeft een overgang tot en met 100%.

Als fallback voor oudere browsers hebben we ook gewoon een eenvoudige achtergrondkleur gedefinieerd. Dit wilt zeggen dat oudere browsers geen gradient zullen zien, maar ze zullen op z’n minst wel “iets” zien.

Transitie

Iets leuk aan CSS is de

transition

property. Hiermee kan je definiëren hoe de overgang moet gebeuren van verschillende properties. Zo zullen we ervoor zorgen dat indien je met de muis over de knop gaat,  de

box-shadow

geleidelijk aan getoond wordt.

De code hiervoor is:

-webkit-transition: background 0.5s, border 0.5s, -webkit-box-shadow 0.5s; /* Safari and Chrome */
-moz-transition:    background 0.5s, border 0.5s,         box-shadow 0.5s; /* Firefox 4 */
-o-transition:      background 0.5s, border 0.5s,         box-shadow 0.5s; /* Opera */
transition:         background 0.5s, border 0.5s,         box-shadow 0.5s; /* W3C */

Zoals je kan zien hebben we ook hier te maken met verschillende browser-afhankelijke prefixes die in de toekomst hopelijk zullen verdwijnen.

Hover

Om een verschil te zien tussen een knop waar je met je muis over gaat en een gewone knop heb ik een aparte achtergrond voorzien. De CSS code hiervoor is:

.btn:hover {
    border-color: #094497;
    background: #418bc4; /* Old browsers */
    background: -webkit-linear-gradient(top,       #81bce0 0%, #418bc4 1%, #2780c4 100%); /* Chrome10+,Safari5.1+ */
    background:    -moz-linear-gradient(top,       #81bce0 0%, #418bc4 1%, #2780c4 100%); /* FF3.6+ */
    background:     -ms-linear-gradient(top,       #81bce0 0%, #418bc4 1%, #2780c4 100%); /* IE10+ */
    background:      -o-linear-gradient(top,       #81bce0 0%, #418bc4 1%, #2780c4 100%); /* Opera 11.10+ */
    background:         linear-gradient(to bottom, #81bce0 0%, #418bc4 1%, #2780c4 100%); /* W3C */
    background:        -webkit-gradient(linear, left top, left bottom, color-stop(0%,#81bce0), color-stop(1%,#418bc4), color-stop(100%,#2780c4)); /* Chrome,Safari4+ */
}

Geactiveerde knop

Naast een hover wil ik ook een verschillende achtergrondkleur tonen voor een geactiveerde knop. Hiervoor hebben we echter twee selectors nodig. Een geactiveerde link wordt namelijk aangeduid met

:active

terwijl een actieve knop eerder aangeduid wordt met

:focus

.

De code hiervoor is niet zoveel verschillend van de voorgaande background-properties, behalve dat we hier gewoon weer andere kleuren gaan gebruiken.

.btn:active, .btn:focus {
    border-color: #093673;
    background: #3571a0; /* Old browsers */
    background: -webkit-linear-gradient(top,       #3571a0 0%, #2780c4 100%); /* Chrome10+,Safari5.1+ */
    background:    -moz-linear-gradient(top,       #3571a0 0%, #2780c4 100%); /* FF3.6+ */
    background:     -ms-linear-gradient(top,       #3571a0 0%, #2780c4 100%); /* IE10+ */
    background:      -o-linear-gradient(top,       #3571a0 0%, #2780c4 100%); /* Opera 11.10+ */
    background:         linear-gradient(to bottom, #3571a0 0%, #2780c4 100%); /* W3C */
    background:        -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3571a0), color-stop(100%,#2780c4)); /* Chrome,Safari4+ */
}

Box shadow

Ten slotte heb ik voor alle geactiveerde knoppen en voor knoppen waar men met de cursor over gaat een

box-shadow

voorzien. Ook dit is iets nieuw dat sinds CSS3 beschikbaar is. De code hiervoor is:

.btn:hover, .btn:focus, .btn:active {
    -webkit-box-shadow: 0px 0px 10px rgba(19, 104, 217, 0.75);
    -moz-box-shadow:    0px 0px 10px rgba(19, 104, 217, 0.75);
    box-shadow:         0px 0px 10px rgba(19, 104, 217, 0.75);
}

Zoals je kan zien wordt hier ook een browser-afhankelijke prefix gebruikt. Opera is ondertussen stilletjes aan aan het afstappen van deze prefixes (en ondersteund ook de prefixes van andere browsers).

De

box-shadow

die wij gebruiken is er eentje die een 0px horizontale en verticale offset heeft met een 10px blur.  De kleur is daarachter te vinden in rgba formaat.

Uitvoeren

Hiermee hebben we de volledige CSS code overlopen en is het tijd om de CSS code eens uit te voeren. Zoals je kan zien ziet de knop er hetzelfde uit voor zowel links, buttons als input-tags. Hier en daar zal je wel een verschil opmerken als je er op klikt of niet, maar dat is uiteindelijk niet zo belangrijk.

button-result

Download project

Download – button-css-example.rar (1,2 kB)

Demo

Back to tutorialsContact me on TwitterDiscuss on Twitter

Profile picture

Dimitri "g00glen00b" Mestdagh is a consultant at Cronos and tech lead at Aquafin. Usually you can find him trying out new libraries and technologies. Loves both Java and JavaScript.