XHTMLforum - Die kleinen Buttons

Ganz ohne Grafik und Skalierbar,
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 

<title>xxxx</title>



<style type="text/css"> 

/*<![CDATA[*/ 



        html,body        {

                margin: 20px;

                padding: 0px; 

                background-color: #999999; color: #000000;

                font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

                font-size: 100.01%;

        }



        hr        {                

                border: 0;

                margin-top: 25px;

                margin-bottom: 5px;

                color: #000000;

                background-color: #000000; /* Mozilla farbe */

                height: 2px;

        }



        b        {

                color: #FFEE22;

                background-color: #666666;

                font-weight: bold;

                padding-left: 3px;

                padding-right: 3px;                

        }



        /* w3c Button 1 */



        div.w3cbutton1        {

                position: relative;

                margin: 1em 0;

                font-family: helvetica,arial,sans-serif;

                font-size: 70%;

                font-weight: bold;

        }

        div.w3cbutton1 a        {

                display: block;

                border-top: 1px solid #cecece;

                border-bottom: 2px solid #4a4a4a;

        }

        div.w3cbutton1 a.w3c1        {

                width: 3em;

                border-left: 1px solid #cecece;

                text-align: center;

        }

        div.w3cbutton1 a.spec1        {

                position: absolute;

                left: 3em;

                top: 0;

                width: 6em;

                border-right: 2px solid #4a4a4a;

                padding-left: 0.5em;

        }

        div.w3cbutton1 a.w3c1:link,

        div.w3cbutton1 a.w3c1:visited,

        div.w3cbutton1 a.w3c1:hover        {

                background-color: #fff;

                color: #0c479d;

                text-decoration: none;

        }

        div.w3cbutton1 a.spec1:link,

        div.w3cbutton1 a.spec1:visited,

        div.w3cbutton1 a.spec1:hover        {

                background-color: #fc6;

                color: #000;

                text-decoration: none;

        }

        

        /* w3c Button 3 */



        div.w3cbutton3        {                

                margin: 1em 0;

                width: 9em;

                border: 1px solid #ccc;

                font-family: helvetica,arial,sans-serif;

                font-size: 70%;

                font-weight: bold;

        }

        div.w3cbutton3 a        {                

                display: block;

                width: 100%;

        }

        div.w3cbutton3 a:link,

        div.w3cbutton3 a:visited,

        div.w3cbutton3 a:hover        {                

                background-color: #fc6;

                color: #000;

                text-decoration: none;

        }

        div.w3cbutton3 span.w3c        {                

                padding: 0 0.4em;

                background-color: #fff;

                color: #0c479d;

        }



        /* w3c Button 4 */



        div.w3cbutton4        {        

                margin: 1em 0;

                width: 9em;

                font-family: helvetica,arial,sans-serif;

                font-size: 70%;

                font-weight: bold;

        }

        div.w3cbutton4 a        {        

                display: block;

                width: 100%;

        }

        div.w3cbutton4 a:link,

        div.w3cbutton4 a:visited,

        div.w3cbutton4 a:hover        {        

                background-color: #fc6;

                color: #000;

                text-decoration: none;

        }

        div.w3cbutton4 a:link,

        div.w3cbutton4 a:visited        {        

                border-top: 1px solid #cecece;

                border-bottom: 2px solid #4a4a4a;

                border-left: 1px solid #cecece;

                border-right: 2px solid #4a4a4a;

        }

        div.w3cbutton4 a:hover        {        

                border-bottom: 1px solid #cecece;

                border-top: 2px solid #4a4a4a;

                border-right: 1px solid #cecece;

                border-left: 2px solid #4a4a4a;

        }

        div.w3cbutton4 span.w3c        {        

                padding: 0 0.4em;

                background-color: #fff;

                color: #0c479d;

}



/*]]>*/ 

</style> 



</head><body>



<hr />





<div class="w3cbutton1">

  W3C

  XHTML 1.0

</div>

<div class="w3cbutton1">

  W3C

  CSS 2

</div>



<hr />





<div class="w3cbutton3">

  <a href="http://validator.w3.org/check/referer" title="Kontrollierte HTML-Qualit&auml;t">

    <span class="w3c">W3C</span>

    <span class="spec">XHTML 1.0</span>

  </a>

</div>

<div class="w3cbutton3">

  <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.stero.de/screen.css" title="Kontrollierte CSS-Qualit&auml;t">

    <span class="w3c">W3C</span>

    <span class="spec">CSS 2</span>

  </a>

</div>



<div style="font-size: 1.2em">

        <div class="w3cbutton3">

          <a href="http://www.stero.de/qualitaet.php" title="Was bedeutet eigentlich W3C?">

            <span class="w3c">W3C</span>

            <span class="spec">bitte was?</span>

          </a>

        </div>

</div>



<hr />



<div class="w3cbutton4">

  <a href="http://validator.w3.org/check/referer" title="Kontrollierte HTML-Qualit&auml;t">

    <span class="w3c">W3C</span>

    <span class="spec">XHTML 1.0</span>

  </a>

</div>

<div class="w3cbutton4">

  <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.stero.de/screen.css" title="Kontrollierte CSS-Qualit&auml;t">

    <span class="w3c">W3C</span>

    <span class="spec">CSS</span>

  </a>

</div>

<div class="w3cbutton4">

  <a href="http://www.w3.org/WAI/WCAG1A-Conformance" title="Web Accessibility Initiative|Priorit&auml;t 1">

    <span class="w3c">W3C</span>

    <span class="spec">WAI - A</span>

  </a>

</div>

<div class="w3cbutton4">

  <a href="http://www.w3.org/WAI/WCAG1AA-Conformance" title="Web Accessibility Initiative|Priorit&auml;t 2">

    <span class="w3c">W3C</span>

    <span class="spec">WAI - AA</span>

  </a>

</div>

<div class="w3cbutton4">

  <a href="http://www.w3.org/WAI/WCAG1AAA-Conformance" title="Web Accessibility Initiative|Priorit&auml;t 3">

    <span class="w3c">W3C</span>

    <span class="spec">WAI - AAA</span>

  </a>

</div>

<hr />





 HTML

 CSS</p>





 </body></html>
Ursprung / Autor :arrow: http://www.sovavsiti.cz/css/w3c_buttons.html