Web-centric Computing

Some Example Code

Text Buttons

The Effect

Buttons Made With CSS: Homepage sections:
address | research | teaching | grad students | other
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>

&
.