J. Blustein

Web-centric Computing

Some Example Code

Text Buttons made with CSS

The Effect

Buttons Made With CSS
What it looks like without CSS

Homepage sections:
address | research | teaching | grad students | other

See also
What it looks like using various browsers

How It Is Done

The CSS
      .noCSS    {visibility:hidden}   /* any element */
     p.nav-bar  {text-align: center}  /* only those P elements */

     span.button
       {border-style: outset;         /* button shape */
        width: 17ex; padding: .2ex;

        border-color: #ffc;           /* colours */
        background-color: #ccc;
        color: #c00;

        font-weight: bold;            /* text effects */
        text-align: center;
        text-transform:capitalize}

    /* links inside buttons */
      span.button a
        {text-decoration:none}
      span.button a:active,           /* note comma and ... */
      span.button a:visited,          /* ... pseudo-classes */
      span.button a:link
        {color:#c00; background: inherit}
      span.button a:hover
        {color:#33f;  background: inherit} 
    
The HTML
       <p class="nav-bar" >
         <span class="noCSS">Homepage sections:<br /></span>
          <span class="button"><a
            href="1.html"
            >address</a></span><span class="noCSS">&#160;|</span>
          <span class="button"><a
            href="2.html"
            >research</a></span><span class="noCSS">&#160;|</span>
          <span class="button"><a
            href="3.html"
            >teaching</a></span><span class="noCSS">&#160;|</span>
          <span class="button"><a
            href="4.html"
            ><abbr 
              title="graduate">grad</abbr>&#160;students</a></span><span
              class="noCSS">&#160;|</span>
          <span class="button"><a
            href="5.html"
            >other</a></span>
       </p>
     

http://www.cs.dal.ca/~jamie/course/CS/4173/examples/CSS/buttons/example.html
Version:
07 March 2003
CS 4173 Prof.:
J. Blustein <jamie@cs.dal.ca>

This document is written in valid XHTML 1.0 &
This document makes use of cascading style sheets.