TIP: Button rollovers in CSS Cascading Style Sheets...
Are you trying to use (CSS) Cascading Style Sheets, but you're having trouble with rollover buttons? Well in this multimedia tip we will explain how to create simple button rollovers using both external
and embedded style sheets.
Firstly let's go through the required CSS
code you will need to create a rollover button. You will need to create
three style states, one for the OFF
state, one for the OVER state and
one for the previously CLICKED/LINKED
state. Let's start by creating the OFF
state, the code below declares our new button style called "OurButton":
Many of the features above are optional for many of the text based styles,
the three mandatory features are:
font-family: Verdana,
Arial, Helvetica, sans-serif; << Any font you wish
font-size: xx-small;
<< This value can also be defined in em %, pixels
color: #009900;
<< Any colour you wish as a HEX value
For more information on CSS Style sheets "More
Eric Meyer on CSS" is very helpful CSS resource.
Now we need to create the CLICKED/LINKED
state, which is very similar to the OFF
state, except that the style name has a:link
before the .OurButton as shown below:
If you change the colour value, then after a user has clicked the button
and they return to that page later, the button will appear which ever
colour you specified to indicate that it has been previously clicked.
Now we need to create the OVER state,
which has a similar syntax to the previous state but the word "link"
is replaced with "hover"
as displayed below:
In this OVER state we have changed
the colour of the button and we have added some text decoration, so that
when this button is rolled over, it will change to an Orange underlined
button. The three style states script should look something like this
below:
External or Embedded style sheets?
(Inline style sheets
are another option availble that we do not explain in this Tip)
Now it's time for you to decide if you would like the new style to be
embedded into your HTML document, or would you like to re-use the style
throughout your website, by simply adding the code into an external style
sheet document.
Inserting Embedded style(s)
If this new style will only appear once on a single webpage, then embed
the style above the </head> tag
in your webpage. You will need to add the following code around your CSS
style code:
So the head of your webpage should look something like this:
Creating External Style sheets
Before we explain how to call the styles in your webpage, we will quickly
go over the external style sheet, which is very similar in concept. Create
a new blank simple text document (without RTF formatting) and copy and
paste ONLY the three style scripts into your new blank text document,
so that it looks like the code below: (or copy and paste)
Then save the document in your websites root folder, as myStyleSheet.css
or whatever you prefer, but make sure that the file suffix has .CSS
at the end. Then in every webpage that you want the styles to appear,
you need to call this document by adding this line code above the </head>
tag:
Please ensure that the name of the file you are calling marries upto
the name of the external style sheet you have previoulsy saved, so the
webpage knows which page to call as it loads. It should look similar to
this:
Calling and utilising a style in your webpage
Regardless of which method you intend to use to attach to your style
code (embedded or externally) to your webpage, either will be accessible
by your buttons, we now need to call the new style in the HTML. Now we
will call the style for our button, so we need to include the CLASS
attribute within the A HREF code, so
below we have listed a 'before' and 'after' example to demonstrate the
attribute inclusion:
Effectively you are only adding: class="OurButton"
into the link code.
Which CSS method should i use?
We would recommend for most (larger) websites that you should use external
CSS style sheets. An external style sheet that links to each of your webpage's
can make updating the appearance of your website an easy task, by simply
changing the values in one file. Using external style sheets can save
you time when editing or updating your websites appearance, it will also
reduce the download time per page, as once the file is loaded the first
time, it is then called from the cache for each occurrence.
If you have between one and three pages in your website or you have a
single page html email, it maybe easier to embed the CSS styles. You will
have to edit every page (except html emails) when you make any appearance
alterations, which can lead to inconsistencies if you don't pay attention
to your modifications per page. With a small website maintenance will
not be an overhaul or issue when updating your style sheets.
We personally prefer to update one CSS page when editing the appearance
of any website, the only exception is when we produce html viral emails,
then we embed the styles.
