Button
1. Button met border
2. Button aan de hand van een achtergrondafbeelding
1. Button met border
Aan de hand van CSS buttons maken van links leg ik hier even uit.
Je kan ze een border geven en wanneer iemand over een link gaat veranderd de achtergrondkleur. Je kan de layout zelf bepalen naar wens. Een button maken in CSS gebeurd met {display:block} , daarna kan je zelf de breedte en hoogte opgeven met width en height indien nodig. In het eerste voorbeeld heb ik dit niet gedaan om het overzicht een beetje te kunnen behouden.
Een voorbeeld
|
<head>
<style type="text/css">
a.mainlevel:link, a.mainlevel:visited {
border:1px solid #cccccc;
display: block;
text-align: center ;
text-decoration: none;
color: #FC6401;
float: left;
font-size: 11px;
font-weight: bold;
padding: 4px;
color: #ff6600;}
a.mainlevel:hover { background-color:#ccccc ; color: #cccccc; }
</style>
</head>
<body>
<a href="#" class="mainlevel">Button 1</a><br><br>
<a href="#" class="mainlevel">Button 2</a><br><br>
<a href="#" class="mainlevel">Button 3</a><br><br>
<a href="" class="mainlevel">Button 4</a><br><br>
</body>
|
Ik geef dus het volgende op.
(dit zijn de belangrijkste 4, de andere zijn meer voor de textopmaak)
| a.mainlevel:link, a.mainlevel:visited |
| border:1px solid #cccccc |
Zorgt voor een rand van 1 pixel dik die de kleur grijs heeft. |
| display: block |
Zorgt voor de eigenlijke button dus het volledige opervlak waar je kan op klikken. |
| float: left; |
Zorgt dat de button aan de linkerkant staat. |
| padding: 4px; |
Is de ruimte tussen text en border. |
| a.mainlevel:hover |
| background-color:#ccccc |
Zorgt dat de achtergrondkleur veranderd wanneer men met de muis over de button komt. |
Geeft ons dit resultaat
Button 1
Button 2
Button 3
Button 4
 top
2. Button aan de hand van een achtergrondafbeelding
Je hebt ook de mogelijkheid om een afbeelding als achtergrond te gebruiken. Als je een afbeelding hebt die uit 2 delen bestaat dan kan je door middel van{ background-position} je afbeelding laten verspringen naar het andere deel uit je afbeelding.
Afbeelding die ik gebruikt heb
Een voorbeeld van de code
|
<head>
<style type="text/css">
a.mainlevel:link, a.mainlevel:visited {
display: block;
background: url(menu_bg.png) no-repeat;
height: 19px !important;
width: 100px;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
color: #ffffff;
text-align: left;
padding-top: 5px;
padding-left: 18px;
text-decoration: none;
}
a.mainlevel:hover {
background-position: 0px -25px;
color: #FC6401; }
</style>
</head>
<body>
<a href="pagina1.htm" class="mainlevel">Pagina 1 </a>
</div>
|
Ik geef dus het volgende op.
(dit zijn de belangrijkste 4, de andere zijn meer voor de textopmaak)
| a.mainlevel:link, a.mainlevel:visited |
display: block
|
Zorgt voor de eigenlijke button dus het volledige opervlak waar je kan op klikken. |
| background: url(menu_bg.png) no-repeat |
Achtergrondafbeelding van de button |
| width: 100px |
Breedte van de button |
| height: 19px !important |
Hoogte van de button |
| a.mainlevel:hover |
| background-position: 0px -25px; |
Zorgt ervoor dat de afbeelding 25 pixels verspringt naar beneden toe. |
Geeft ons dit resultaat
Pagina 1
Pagina 2
Pagina 3
Pagina 4
Dit was een kleine tutorial over buttons in CSS maar heel handig om weten en je kan er leuke dingen mee maken. Je test best de voorbeelden nog eens maar dan met een eigen opmaak en met eigen afbeelding om een goed doorzicht te krijgen in de code.
top
|
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
