How to add a CSS3 HTML button to iWeb

Want to add a fancy CSS3 button to your iWeb site? Look no further. This tutorial will help you improve the look and feel of your website with only a few lines of code. (I also included a regular image button instead towards the end of this tutorial).

First a little background. CSS/CSS3 allows you to customize the appearance and reaction of your web elements. In regards to buttons, or call to action buttons, CSS will help you provide different styles when a user hovers and presses a button. Give it rounded corners, text shadow, and even gradient or image properties. This will work on all modern browsers, Safari, Google Chrome, Firefox, Opera. IE9 and the upcoming IE10 will utilize most of it but I’ve included the basic background color as a fall back. But rest assured all Mac users will see your beautiful CSS3 button in action!

So how do we add it to iWeb? All you need is an HTML snippet and a few minutes deciding the colors.

Lets start by adding the main styles for the button. Below is the first part of our overall snippet, the main a.button styles.

a.button {
/* background colors */
background-color: #79affb;
background-image: -webkit-gradient(linear, left top, left bottom, from(#79affb),to(#2b8df9));
background-image: -webkit-linear-gradient(top, #79affb, #2b8df9);
background-image: -moz-linear-gradient(top, #79affb, #2b8df9);
background-image: -o-linear-gradient(top, #79affb, #2b8df9);
background-image: -ms-linear-gradient(top, #79affb, #2b8df9);
background-image: linear-gradient(top, #79affb, #2b8df9);
filter: progid: DXImageTransform.Microsoft.gradient(startColorStr='#79affb', EndColorStr='#2b8df9');

/* Border Radius */
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;

/* Width of button */
width: 130px ;

/* Font style of button */
color: white;
font-size: 14px;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
text-align: center;
font-weight: normal;
line-height: 14px;
overflow: hidden;
display: inline-block;
text-decoration: none;
padding: 10px 0px;
}

 

First we have the background-color which is the default solid color to fall back on. Next we have the gradient colors. The -webkit is for Safari, -moz is for Firefox, -o is for Opera, -ms and filter is for IE9+. These are gradients so the first number, #79affb, is the top color and the second number, #2b8df9, is the bottom color. Next we have a border radius of 20px to give our button rounded corners, a button width of 130px, and the font styles.

For the next state, we want to add a hover effect for the button when the visitor moves their mouse of it. Below you will see the “hover” code. All that is changed is the colors. I went a little darker for the top and bottom gradients.

a:hover.button {
background-color: #6fa0e7;
background-image: -webkit-gradient(linear, left top, left bottom, from(#6fa0e7),to(#237fe4));
background-image: -webkit-linear-gradient(top, #6fa0e7, #237fe4);
background-image: -moz-linear-gradient(top, #6fa0e7, #237fe4);
background-image: -o-linear-gradient(top, #6fa0e7, #237fe4);
background-image: -ms-linear-gradient(top, #6fa0e7, #237fe4);
background-image: linear-gradient(top, #6fa0e7, #237fe4);
filter: progid: DXImageTransform.Microsoft.gradient(startColorStr='#6fa0e7', EndColorStr='#237fe4');

}

 

Next add the active state. This shows when the user pressed the button. The colors here are reversed order.

a:active.button {

background-color: #237fe4;
background-image: -webkit-gradient(linear, left top, left bottom, from(#237fe4),to(#6fa0e7));
background-image: -webkit-linear-gradient(top, #237fe4, #6fa0e7);
background-image: -moz-linear-gradient(top, #237fe4, #6fa0e7);
background-image: -o-linear-gradient(top, #237fe4, #6fa0e7);
background-image: -ms-linear-gradient(top, #237fe4, #6fa0e7);
background-image: linear-gradient(top, #237fe4, #6fa0e7);
filter: progid: DXImageTransform.Microsoft.gradient(startColorStr='#237fe4', EndColorStr='#6fa0e7');
}

Finally, we need to add the HTML link for the button to show in the HTML snippet. This is a typical <a href></a> link but with a class called “button”. The class will call the above scripts and apply the styles to any element with that same class of “button.” I also added a target to force the button to open in the same window as the current webpage and not the HTML snippet.

<a href="#" class="button" target="_parent">HTML Button</a>

Place all above codes together into your HTML snippet and you will have a full CSS3 HTML button.

Image CSS Button

Now, if you want to full proof your button, then an image background should be used instead. Design your button in iWeb or any graphic editing application such as pixelmator or photoshop. Create three styles of the button all the same width and height. Below is the full source code:

 

a.button-brown {
background: url(button-brown.png) 0 0 no-repeat;
width: 172px ;
height: 26px;
color: #CC0000;
font-size: 14px;
font-weight: bold;
text-align: center;
line-height: 18px;
overflow: hidden;
display: inline-block;
text-decoration: none;
padding: 10px 0px;
text-shadow: 0px 1px 2px #fff;
}

a:hover.button-brown { background: url(button-brown.png) 0 -47px no-repeat; }
a:active.button-brown { background: url(button-brown.png) 0 -94px no-repeat; }

<a href="#" class="button-brown" target="_parent">Image Button</a>

Notice this code is a lot less. I’m using background: url() to call the image file with a position of 0 0. This tells the browser to draw the normal background and start at the top left corner of the image file. Next the hover and active only needs to have the new background positions since I’m using the same background file and the same styles. So the hover state is positioned at 0 -47px’s from the top left and the active state is positioned at 0 -94px’s from the top left.

 

  1. Great tutorial. Thanks!

Comments are closed.