Belknop maken met html en css

Belknop in css gr1

Submit to FacebookSubmit to Google PlusSubmit to TwitterSubmit to LinkedIn

Een belknop in HTML en CSS maken is niet zo moeilijk en is een leuke oefening als je nog niet zoveel weet van css, je zou dit natuurlijk ook met een plaatje van een mobiele telefoon kunnen doen en deze linken aan je telefoonnummer.

Maar het laden van een plaatje kost meer tijd en data dan als je dit met css zou doen, en zeker met een tragere verbinding zoals met een mobiele telefoon is dit een betere oplossing.

Maar hoe pak je dit aan? Dat zal ik je uitleggen in deze blog, dan krijg jij ook zo'n knop als deze.

Maak een nieuw artikel aan en schrijf je artikel. Als je met JCE werkt kun je schakelen tussen tekst en code. JCE kun je gratis downloaden.

Eerst ga je het artikel schrijven en de plaats van de knop bepalen.

Zet nu de tekstverwerker op code, voeg de html code toe aan je artikel. 

Deze code kun heel eenvoudig selecteren, kopieren(ctrl-c) en dan verplaatsen(ctrl-v) in je eigen artikel.

<center>
<p><a href="tel:+31612345678"><span style="font-size: 14pt;"><button class="belknop"> Bel mij</button></span></a></p>
</center>

Pas het telefoonnummer aan naar je eigen nummer, de +31 code is de landcode van Nederland.

Je kunt deze code ook selecteren en dan kopieren in je eigen artikel of module. Je kunt de tekst in de belnop aanpassen naar wat jij erin wil hebben. Ik heb hier "Bel mij'' in gezet.

Het stijlen van de belknop met css, hoe doe je dat?

Nu zie je dat de knop er nog gewoon grijs uitziet, zo ziet de knop eruit als deze nog niet is aangepast met CSS.

Nu ga je de knop aanpassen met css, dit doen we in de template css van de template, ga hiervoor naar extenties - templates en kies hiervoor templates en niet voor stijl.

Open nu de template die je gebruikt voor je website, ik gebruik nu als voorbeeld protostar.

Klik op css, en maak nu een nieuw bestand aan en geef dit de naam user en selecteer eronder dat dit een css bestand moet zijn. Controleer even of het nieuwe bestand in de map css staat anders werkt het niet.

Als je een ander template gebruikt zoek dan naar user.css of custom.css.

Nu kun je de code die hieronder staat in het user.css bestand kopieren. De class naam belknop moet beginnen met een punt dus dat is geen schrijffout.

De achtergrondkleur van de knop is nu een blauwe kleur maar dit kunnen alle kleuren van de regenboog zijn, kijk hier voor het HEX kleurnr van jouw gewenste kleur, let op het # voor het kleurnummer.

 .belknop{
background-color:#0090E1;
color:#555;
padding: 5px 10px
width: 150px;
height: 40px;
border-radius: 50%;
transition: all 0,2s ease-in-out 0s;
}

Je kunt nu je eigen afmetingen invoeren voor de grote van de belknop, ik heb deze 150px breed gehouden en 40px hoog en met een radius van 50% voor een mooie ovale knop. Je kunt er ook voor kiezen om kleine afgeronde hoekje te kiezen.

De css code moet je dan aanpassen naar ''border-radius: 3px'' voor 4 gelijke hoekjes met een radius van 3px, als je met de css code voor de afgeronde hoekjes gaat spelen bv '' border-radius: 10px 2px 10px 2px;'' of '' border-radius: 25px 0px 25px 0px;" zonder aanhalingstekens, speel hier even mee tot je de juiste keuze hebt gemaakt.

Om nu de knop van kleur te laten veranderen tijdens het zweven kun je deze code gebruiken in je template css, de kleur gaat dan van blauw naar grijs, met een slagschaduw die de kleur grijs heeft en aan te passen is bij box-shadow.

.belknop:hover {
background-color:#808080;
box-shadow: 5px 5px 5px #808080;
}

Je kunt de code voor de belknop gebruiken in een module of in ieder artikel wat je op je website hebt staan zodat het eenvoudiger is voor je bezoekers om contact met je op te nemen via de telefoon.

Ik heb na een bericht van een lezer de code een beetje aangepast omdat er een foutje in zat. Dit ging over het aanmaken van een user.css, dit heb ik inmiddels aangepast dus nu moet het geen probleem meer opleveren om dit werkend te krijgen.

Wat eigenlijk ook niet nodig is, is het laten zien van de belknop op een groter scherm zoals een computer omdat bellen daarmee meestal toch niet gaat. Ik heb de code daarvoor ook aangepast zodat de belknop alleen maar zichtbaar is op een mobiele telefoon.

Deze heb ik hier onder staan, deze kun je in het nieuw aangemaakte user.css bestand zetten zodat de belknop alleen zichtbaar is op schermen die kleiner zijn dan 480px.

De code is bijna gelijk aan de code die hierboven staat, alleen staat deze nu dubbel, 1 voor grotere schermen en 1 voor schermen met een maximale breedte van 480px.

/* Desktops (portrait and landscape) ----------- */

.belknop {
background-color:#0090E1;
color:#f2f2f2;
padding: 5px 10px
border: solid 2px #0090e1;
width: 180px;
height: 50px;
border-radius: 50%;
margin: 45px 0px 0px 0px;
transition: all 0,2s ease-in-out 0s;
}
.belknop:hover
{ background-color:#808080;
box-shadow: 5px 5px 5px #f2f2f2; }

De bovenste code kun je gebruiken als deze op alle schermen weergegeven moet worden, maar dat is meestal niet nodig, daarom kun je deze beter alleen op mobiele schermen zoals een telefoon laten zien. |

Gebruik deze code om de belknop alleen op een mobiel scherm te laten zien. Zet dan alleen deze code in het user.css.


/* Phone (portrait and landscape) ----------- */

@media screen and (min-width: 480px) {
.belknop {
background-color:#0090E1;
color:#f2f2f2;
padding: 5px 10px
border: solid 2px #0090e1;
width: 180px;
height: 50px;
border-radius: 50%;
margin: 45px 0px 0px 0px;
transition: all 0,2s ease-in-out 0s;
}
.belknop:hover{ background-color:#808080;
box-shadow: 5px 5px 5px #f2f2f2;
}
}

Zet al deze code met ctrl-C en ctrl-V in de user.css map en pas daarna de kleuren aan, de breedte van 480px is redelijk gangbaar voor mobiele telefoons. 

 

Mocht het niet helemaal lukken of wil je meer weten over het gebruik van css, of heb je andere vragen over de bouw van een website, neem contact met mij op.

Ik heb de ervaring om er een mooie website van te maken.   

 

 

 

Wil jij mij ook helpen deze artikelen te delen?
Voor jou één simpele muisklik onderaan deze pagina, voor mij een zeer gewaardeerd cadeautje!

Submit to FacebookSubmit to Google PlusSubmit to TwitterSubmit to LinkedIn