25 Oct 2010

How to add CSS3 buttons to your iWeb site

24 Comments Tutorials

Those of you that follow my twitter feed will know that I have been a little displeased with the fact that iLife 11 didn’t get a new (or even updated) version of iWeb. Apple seem to be wanting to lead the way when it comes to browsers, but doesn’t seem to want to produce a web design app to back it up.

Moaning aside, one thing that I would have expected to see in a new version of iWeb is the use of CSS3, the latest version of ‘Cascading Style Sheets’ that allows you to arrange and design a web page how you want to. CSS3 allows us to do much more than layouts however, and in this tutorial I want to show you how you can add great looking buttons to your iWeb site using just CSS3 – no images.

So what are the benefits of using CSS3 to create buttons for an iWeb site (or indeed any web-site)?

It’s all CSS, no javascript and no images so they will load quicker.

They are easily customizable, just by changing a few color codes or font-names a new button can be applied.

Each button comes in three states; normal, hover and active

In case a visitor to your site has a none CSS3 browser they still work; just without the shadow or gradient.

So how do we do it? An HTML Snippet is all we need!

Below you will see the code I used to get the orange button in the image above. All I did to get the other buttons is change the color codes for the backgrounds and fonts.

<style type="text/css">
.button{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
background: #FF4D01
background:  -moz-linear-gradient(19% 75% 90deg, #FF4D01,
#FF8924);
background:  -webkit-gradient(linear, 0% 0%, 0% 100%,
from(#FF8924), to(#FF4D01));
color: #fff;
float: left;
font-family:  arial,helvetica,sans-serif;
font-size: 15px;
font-weight: bold;
padding: 8px 20px;
text-decoration: none;
}
.button:hover{
background: #EB4701;
background: -moz-linear-gradient(19% 75% 90deg, #EB4701,
#F58423);
background: -webkit-gradient(linear, 0% 0%, 0% 100%,
from(#F58423), to(#EB4701));
}
.button:active {
background: #F58423;
background: -moz-linear-gradient(19% 75% 90deg, #F58423,
 #EB4701);
background: -webkit-gradient(linear, 0% 0%, 0% 100%,
 from(#EB4701), to(#F58423));
position: relative;
top: 1px;
}
</style>
<a href="http://allaboutiweb.com" class="button">Button Text</a>

Everything highlighted in red can be changed to give the buttons a different look. It would take far too long to explain all of the different methods so I have found a few CSS3 related sites that explain it far better than I ever could. The links can be found at the bottom of the page.

Here’s a quicker breakdown of the code. The first line tells the users browser that the CSS for the button is included on the page (rather than it being linked to another page), and the second just sets the name of the CSS3 class for the button.

Lines 3, 4 and 5 set the border radius for different browsers to understand, for example, by increasing this figure the rounded corners will increase.

Lines 6, 7 and 8 apply a slight shadow to the button to give it a bit of depth.

Lines 9, 10 and 11 set the background color of the button; the first is for IE, the second for Firefox and line 11 for Safari.

The remainder of the lines are for font settings and its position within the button.

Moving on to the ‘hover state’ all that has happened is that the gradient has changed slightly to allow the button to look as if it has been pressed slightly.

And finally the ‘active state” changes the colors once again but also applies a little 1 pixel nudge to the button so it really does look pressed.

The very last line is the button itself. Obviously you need a link for the button to go to and of course some ‘Button Text’ to appear on the button too.

All of the code is pasted into an HTML Snippet then press ‘Apply’. You may find (as I did) that the Snippet border may close in around the button, but this can be dragged out using the handles.

In order to see the full effects of your button you will need to publish your site to a local folder and then open it in Safari; you can spend hours, just like I did this last weekend, experimenting with colors, moving the shadows or changing the fonts to match your site. the effects can be amazing.

CSS Gradients Explained – CSS Tricks

CSS3 Border Radius – CSS3.info

And that is all there is to it. I agree that it may look like a lot of code for one button, but HTML Snippets can be copy/pasted so once you have one completed taking your site forward with CSS3 will be easy.

Are you going to use CSS3 on your iWeb site? Do you think CSS3 should be included in the next version of iWeb? Leave us a comment and let us know; and don’t forget to check out the CSS links above.

Tags: , ,
written by
AllAboutiWeb (AAi) is your one stop shop for everything iWeb. We provide tips, tricks and more to get the most out of your iWeb website. Follow us in twitter at @allaboutiweb
Related Posts

24 Responses to “How to add CSS3 buttons to your iWeb site”

  1. Reply Tweets that mention How to add CSS3 buttons to your iWeb site | All About iWeb -- Topsy.com says:

    [...] This post was mentioned on Twitter by riccardofala, CSS3 Gallery css. CSS3 Gallery css said: How to add CSS3 buttons to your iWeb site | All About iWeb http://bit.ly/aOkaMa [...]

  2. Reply brian says:

    I soooooooo wanted an update to iWeb. Maybe it will move to iWork?

  3. Reply Jörn says:

    Someone mention in the Apple forum that maybe an update to iWeb will come in Mac App Store. Our hopes lies there now. Thanks for your article. Will try it out someday =)

  4. Reply Simon says:

    Thanks for the tutorial. How do I make the completed button into a link? When I select the button the link info in the iWeb inspector is greyed out….am I missing something? TIA.

  5. Reply Simon says:

    Thanks Tim – should’ve read your post more closely (blushes…)

  6. Reply Jennifer says:

    The button looks OK in iWeb, but when I published my site the button background disappeared. All I see is the text and button shadow. When I hover over the button it changes color and becomes visible. Any idea what is up with that?

    And, is it possible to make the button point to a file to be downloaded?

    Thanks

  7. Reply Sergio R. Téllez says:

    This doesn’t work when some windows user visits our website, for example the radius in borders are just squared, IE or Safari.

    • Reply Tim Bowden says:

      Sergio, that is very true. Thats because Microsoft haven’t made IE a compliant browser like everybody else has. This should all become fine when IE 9 is released soon.

      Tim

  8. Reply Jason says:

    If I wanted to have a transparent background in the normal state (just a word such as “CONTACT”) would I type “transparent” as the background color or add something like this (http://css-tricks.com/css-transparency-settings-for-all-broswers/) to the code?

    Has anybody done this already? Thanks.

  9. Reply Jason says:

    Sorry for the premature post. I had a chance to try it for myself and typing “transparent” works just fine :)

  10. Reply Enoch says:

    Please let me know how to get button to point to second page in my iweb site instead of welcome page?

  11. Reply Enoch says:

    When I use hyperlink in inspector button points to welcome page of my website, but shows no buttons on my website why?

  12. Reply Sarita says:

    I’m with Jennifer and her question. I have the same problem, but only in Firefox. Is it something in the coding?

  13. Reply jane says:

    Thanks for the post – the simplicity of use with iweb is amazing – just wish there was more functionality.

    This question is totally separate – I love the way you present the share & enjoy social bookmarks and the way they pop up. I’ve searched for that type of sample before but haven’t had any luck finding the page. Did you create it yourself or can you share where it is from? Thanks!

  14. Reply Ryan says:

    How do I change the last line to point to a .pdf document instead of another page?

  15. Reply David says:

    This isn’t working in Firefox 3.6.13. I wish it did.

  16. Reply Matthew says:

    How do I change the values so can get the blue button? I’m html illiterate. Thanks in advance!

    Matthew

  17. Reply Matthew says:

    How do I get the button to open an email? I want a “Sign Up” button that will let the person send me an email. Thanks!

  18. Reply Jezhawk says:

    Ah I love how this button looks on my site, but too bad that it doesn’t work in Firefox.
    Mine remains invisible until you hover over it. If someone finds a fix please let me know!

  19. Reply CSS3 Button Showcase - 25 Previews and Links to Tutorials | Hot List says:

    [...] by Alex Whinfield Sexy Buttons Radioactive CSS3 Buttons Zardi – Pack of CSS3-only buttons How to add CSS3 buttons to your iWeb site Build Kick-Ass Practical CSS3 Buttons CSS3 & Flexible UI: Avoid Recutting UI Graphics for [...]

  20. Reply Simon says:

    Hello,

    When i cut and paste the code into the HTML snippet, it just displays the code and not the button, am i missing something here?

    Cheers

  21. Reply Simon says:

    Oh by the way, your website is great! so helpful, thankyou very much!!

Leave a Reply