CSS knop met link

[Searche93]

Hallo,

Ik ben nog niet zo'n css expert dus ik hoop dat jullie mij wat verder kunnen en het één en ander verduidelijiken.

Ik wil een website maken met daarin een grote knop.

Hoe maak ik zo'n knop in CSS?

 

[gast0158]

En welke eigenschappen wil je die knop toedichten ?

 

[bron]

Bij tekstknop:
<div class="knop"><a href="#"><span>Tekst op knop</span></a></div>

Bij knop met plaatje:
<div class="knop"><a href="#"><img src="foto.jpg" alt=""></a></div>

.knop { /*plek waar knop moet komen*/ }
.knop a { }
.knop span { /*deze als je tekst wilt gebruiken*/ }
.knop img { /*deze als je een plaatje wilt gebruiken*/ }

 

[Searche93]

Sorry, het was toch niet helemaal wat ik bedoelde haha.

Wat ik wil is een knop die linkt naar een pagina natuurlijk.
Hierin wil ik boven aan de knop een image, onderaan de knop tekst en ik wil de width en height kunnen aanpassen (het liefst in css).
Ook wil ik een soort onmouseover effect voor de knop kunnen toevoegen.

Ik hoop dat jullie me begrijpen, alvast bedankt!

 

[gast0158]

Volgens mij is dat nu precies wat Bron voor je uitgeschreven heeft. :S
Er ontbreken hooguit nog een paar schaduwranden maar je mag er best zelf ook nog een klein beetje over nadenken.

 

[bron]

Een simpel voorbeeldje wat je zelf kunt aapassen :d

html:
<a class="knop" href="pagina.html">
  <img src="image.jpg" alt="">
  <span>tekst onder image</span>
</a>
css:
.knop, .knop img, .knop span {width: 200px;}
.knop {display: block; text-align: center; text-decoration: none;}
.knop img {height: auto; border-color: #f00;}
.knop span {font: italic 100% sans-serif; color: #00f;}
.knop:hover img {border-color: #00f;}
.knop:hover span {color: #f00;}

Suc6 en have fun.

 

[Searche93]

Sorry voor de late reactie haha.

Bedankt in ieder geval, ik ga er helemaal uitkomen!