[HTML/CSS] Hoe best een button met afgeronde hoekjes maken

[Verwijderd]

Hoi,

ik ben al aan het brainstormen geweest hoe ik best een button met afgeronde hoekjes kan maken.
Ik wil dus dat ik de tekst dynamisch in de button kan invullen en dan links en rechts hiervan afgeronde hoekjes staan.

ik dacht dus aan een divje met een background en links en rechts een figuurtje met afgeronde hoeken... maar kom er niet uit.

Ik bedoel wel geen <INPUT type="button" /> maar een image als button

groetjes...

[Arunia]

Als je bekend bent met Photoshop, dan kun je dit makkelijk hierin doen.
Gewoon voor de tekst een aparte laag maken waarin je dus de tekst kunt wijzigen
en onder een andere naam kan opslaan.

[Zoefff]

Als je de button op een solid achtergrond hebt, en de button een vaste breedte heeft, is het vrij simpel te maken.

Maak een plaatje waarbij de button volledig transparant is, behalve de hoeken. Die maak je dezelfde kleur als de achtergrond waar de button op komt. Neem dan een element, geef als achtergondplaatje die button op, en kies een willeukeurig kleurtje als achtergondkleur. Voila, je button verschijnt in die kleur

Cascading Stylesheet:

.button {
    display:block;
    background-color: #kleurdiejebuttonmoetkrijgen;
    background-image: url(button_hoekjes.gif);
}

Moet je alleen zorgen dat de afmetingen van het plaatje natuurlijk wel overeenkomen met de afmetingen van je element

[Verwijderd]

Zoefff schreef op woensdag 05 oktober 2005 @ 12:22:
Als je de button op een solid achtergrond hebt, en de button een vaste breedte heeft, is het vrij simpel te maken.

Maak een plaatje waarbij de button volledig transparant is, behalve de hoeken. Die maak je dezelfde kleur als de achtergrond waar de button op komt. Neem dan een element, geef als achtergondplaatje die button op, en kies een willeukeurig kleurtje als achtergondkleur. Voila, je button verschijnt in die kleur

Cascading Stylesheet:

.button {
    display:block;
    background-color: #kleurdiejebuttonmoetkrijgen;
    background-image: url(button_hoekjes.gif);
}

Moet je alleen zorgen dat de afmetingen van het plaatje natuurlijk wel overeenkomen met de afmetingen van je element

Ja, dat is net het probleem, de knop wordt natuurlijk groter naarmate de tekst erin. Die is altijd variabel...

[Zoefff]

Dat hoeft natuurlijk niet perse. Je kan een button ook een vaste breedte meegeven en de tekst centreren, zodat er links en rechts een wat grotere padding ontstaat als je korte teksten in je button zet. Maagoed, dat hangt natuurlijk van het ontwerp van je site af, het moet er maar net bij passen

[TXC]

Kun je die grootte van het element niet uitlezen met JavaScript en vervolgens de grootte van het plaatje (de button) daaraan aanpassen?

[KappuhH]

Ff een tabelletje maken?

code:

<table>
<tr><td height = "hoogte hoekje" width = "breedte hoekje" >url hoekje rechtsboven</td><td>niks</td><td height = "hoogte hoekje" width = "breedte hoekje" >url hoekje linksboven</td></tr>
<tr><td colspan = "3">je tekst</td></tr>
<tr><td height = "hoogte hoekje" width = "breedte hoekje" >url hoekje rechtsonder</td><td>niks</td><td height = "hoogte hoekje" width = "breedte hoekje" >url hoekje linksonder</td></tr>
</table>

Heeft wel als consequentie dat je niet op de bovenste rij kunt typen...

[Zoefff]

Om nog maar niet te spreken over de ranzigheid van deze oplossing

[disjfa]

Als je geen vaste breedtes gebruikt of gewoon een nette oplossing zoekt (geen tables dus )

sliding doors of custom corners

[OkkE]

Op A List Apart staan twee artikelen over ronde hoeken, misschien dat je daar wat aan hebt..

CSS Design: Creating Custom Corners & Borders
CSS Design: Creating Custom Corners & Borders Part II