CSS Sprite für Button

Krusty

hey,

kann mir mal jemand helfen? ich habe diese grafik:
http://img814.imageshack.us/img814/9284/buttonsprite.png

Diesen CSS-Code

HTML

.button_sprite a {
   background: transparent url(button-sprite.png);
   display: block;
   line-height: 16px;
   padding: 15px 20px 12px 18px;
   font-size:16px;
   color:#fff;
   font-weight:bold;
   float: right;
   height: 43px;
   margin-right: 30px;
   margin-top: 340px;
   text-decoration: none;
}

Alles anzeigen

Und das als HTML:

HTML

<div class="button_sprite">
<a href="">zum Download</a>
</div>

wie mache ich das nun, dass sie die rechte rundung verschiebt? geht das?

danke im voraus für die hilfe.

grüße

Thonixx

Du meinst, du willst, dass beim Hover die rechte Ecke kommt und der Rest verschwindet oder willst du, die Ecke, vervollständigt sich?

Krusty

Die Ecke soll sich vervollständigen. Das ist nötig, da der Text manchmal länger und manchmal kürzer sein wird.

Thonixx

Dann ist das mit einer Grafik nicht lösbar, oder wie soll das CSS können?
Du müsstest eine Grafik ohn die Ecke machen und dann eine mit der Ecke und allem zusammen.
Dann musst du diese in Photoshop oder Paint oder so übereinander legen, also oben die erste Grafik und unten die vollständige Grafik.

Mit Hover dann so machen, dass du nur die Background-Position änderst.

unknownsoldier

Ehm Thonixx, es ist sehr wohl möglich mit nur einer Grafik, buttons zu erstellen die in der Breite Variabel sind.

http://www.smashingmagazine.com/2009/04/27/the…-and-tutorials/

http://mezzoblue.com/archives/2009/01/27/sprite_optim/

http://sixrevisions.com/css/30-excepti…ion-techniques/

http://kailoon.com/css-sliding-door-using-only-1-image/

PS: Du glaubst gar nicht wozu CSS so alles fähig ist
http://www.cssplay.co.uk/menu/amazing.html#nogo
http://www.romancortes.com/blog/pure-css-coke-can/
http://www.romancortes.com/ficheros/scroll_down.html
http://www.romancortes.com/ficheros/hanoi.html

Tags