TXGenWeb & CSS

Fun Things to Do with CSS

Buttons

Almost all of us have navigation buttons on our websites and I'm going to define them as any clickable link or graphic that sets off an event such as loading a new page, showing a photo, or sending an email.

Odd-shaped buttons

Stacked buttons

In-line buttons

You can use a simple link like "Click here" and it'll get the job done but, with a little CSS, you can decorate your link and turn it into a stylish button. You can even do a simple animation with a hover effect. A hover effect is what happens when someone holds their pointer over something and can be applied to almost any item in HTML.

When you create a link for a URL or an email address, you use the HTML command <a></a>. Note that you always use an open and a close (/) (except line breaks and images). You can decorate this <a> command with CSS!

Let's decorate a button that will be for my email address on my page. We start with

<a href="mailto:ginagaleh@yahoo.com">My Email Address</a>

a is for address
href for HTML reference
mailto means an email address instead of a web page address
(When you think of it this way, it isn't so scary.)

We add a style to this line.

<a href="mailto:ginagaleh@yahoo.com" style="">My Email Address</a>

And then we decide what we want it to look like.

First we choose a color for the text. color: LightBlue;
Then we'll add a background color. background-color: Blue;
We'll add some padding to the inside so the background will be a little larger than the text. padding: 5px;
You might want to outline the button with a contrasting color to give it some depth. border: 2px solid LightGray;
The text is a little hard to see, so we make it bold. font-weight: bold;
We no longer need the underline. text-decoration: none;
I prefer rounded corners. border-radius: 10px;
I like drop shadows for buttons. box-shadow: 2px 2px 5px Black;

<a href="mailto:ginagaleh@yahoo.com" style="color: LightBlue; background-color: blue; padding: 5px; border: 2px solid LightGray; font-weight: bold; text-decoration: none; border-radius: 10px; box-shadow: 2px 2px 5px black;">My Email Address</a>

Now I have my button exactly the way I want it but I want to be able to apply it to all my buttons.
If I want to save it for just this page, I can move it to the HEAD of the page, name it and wrap it it in a style command. This is called a CLASS and this one's name is button1.

If I want to use it throughout the site I use a 4-step process:
1. I move the CSS to a new file.
2. Name the new file with a css extension.
3. Add a style sheet link at the top of each page. [below]
4. Call for the class each time want to use it. <a href="mailto:ginagaleh@yahoo.com" class="button1">My Email Address</a>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="TXGenWeb presentation on fun things to do with CSS">
<meta name="Author" content="Gina Heffernan">
<meta name="KeyWords" content="CSS, forms, decor, resolution">
<title>TXGenWeb & CSS</title>
<link rel="shortcut icon" href="http://www.cnocandoire.com/tutorials/css-basic/favicon.ico">
<link rel="stylesheet" type="text/css" href="includes/css-button.css">
</head>

The red line above would be replaced with the <style> block above if we only wanted it on this page.

Now if I want to add a button to any link on my site, all I have to do is add a CLASS to it.

<a href="https://www.ancestry.com/" class="button1">Ancestry.com</a>

I've changed the background color so you can see the buttons a little better.

If you're a little OCD like me and you want all your buttons to be the same width, you can give the buttons a width but it takes 2 lines.
An <a> element is an INLINE element so we tell the browser to display it as a BLOCK element but to retain the inline characteristics.
display: inline-block;
width: 200px; And then we give them a width.

Fun Things to Do with CSS

Buttons

Photographs