CSS Selector i knap

Din last-child virker ikke fordi der er et child (.bottom-button-line) efter dit sidste element med class="part", ville det være et problem bare at tilføje en ekstra class til din pil..?

Sådan her:

 <div class="outer part">
     <div class="part">IKON</div>
     <div class="part">Tekst</div>
     <div class="part last" style="padding-right: 15px;">-></div>
     <div class="bottom-button-line"></div>
 </div>

 .part{
     display: inline-block;
 }
 
 .outer{
     border:1px solid black;
     padding-bottom: 0px;
     padding-top: 5px;
 }
 
 .outer .part:first-child{
     padding-left:15px;
 }
 
 .outer .part.last{
     padding-right: 15px;
     margin-right: 15px;    
     background-color: red;
 }
 .bottom-button-line{
     margin-top: 5px;
     height: 5px;
     background-color: blue;
 }

http://jsfiddle.net/0cfhp2vh/2/

Håber ikke det er helt ubrugeligt.. ;-)

Der er vel ingen grund til, at lave så mange elementer.

http://jsfiddle.net/0cfhp2vh/6/


Edit: http://jsfiddle.net/0cfhp2vh/9/ nu med animation.

button er et almindeligt html element. Ikonet kan du bare skifte ud med et img, burde ikke være noget problem. button:after kan bare laves om med et baggrundsbilled og content sættes til ""


Sådan her kunne det også gøres: http://jsfiddle.net/0cfhp2vh/10/

Fik det løst, netop ved at tilføje nogle specifikke klasser Tak.

http://jsfiddle.net/0cfhp2vh/4/

Der er vel ingen grund til, at lave så mange elementer.

http://jsfiddle.net/0cfhp2vh/6/


Edit: http://jsfiddle.net/0cfhp2vh/9/ nu med animation.

Hatten af! Det var flot lækker kode!

Hvordan går validering af HTML elementer man selv opfinder? Er det kun tilladt ved doctype HTML5 eller også under 1 og 4? strict?

Derudover så er jeg ikke sikker på hvordan jeg skifter teksten "IKON" ud med et egentligt ikon, og button:after har content: "->"; men skal jo også ende med at være et pil ikon.
How to fix that?

button er et almindeligt html element. Ikonet kan du bare skifte ud med et img, burde ikke være noget problem. button:after kan bare laves om med et baggrundsbilled og content sættes til ""


Sådan her kunne det også gøres: http://jsfiddle.net/0cfhp2vh/10/

Meget imponeret Dan Tak for hjælpen til smuk effektiv kode

Har nu arbejdet videre med den, men kan simpelthen ikke finde ud af hvordan jeg får følgende to billeder ind:
Arrow: http://www.mricons.com/store/png/124214_43219_128_arrow_monotone_next_right_icon.png

Icon: http://www.mricons.com/store/png/124269_43274_128_happy_monotone_smiley_icon.png

Går ud fra at en forskellig klasse på hver button bør kunne skifte ikon?