Lee Munroe » tutorial

How To Design A Sexy Button Using CSS

Lee — Tue, 26 Jan 2010 09:02:24 +0000

Last week I launched a holding page for Ecliptic Labs, an iPhone development company based in Belfast (keep an eye on them, there’s going to be some great stuff from them this year).

Here is the holding page in all it’s glory.

One thing you’ll notice is the big ‘Notify me’ button. One of the great things about this button is that it isn’t a graphic. It’s simply styled using CSS.

Advantages of using CSS instead of a graphic:

Optimisation – less file size, less http requests
Reusable – button can be used over and over again for different actions
Flexible – the button can stretch or compact depending on length of the text

Styling the button element

I’m going to be using Firefox 3.6 for the previews below.

The markup

This is how the default button looks.

Basic styling

First apply some basic styling to get started.

button{
color:#08233e;
font:2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif;
padding:14px;
}

Nothing strange or startling about these styles. This is what we have now.

Background

Let’s add a background. Remember, we want to make the button reusable for any colour.

Go into Photoshop and create a new image 10px x 100px
Create a white rectangular shape that covers the top half of the canvas on a new layer
Give that layer 30% opacity and make the background transparent
Save that image as overlay.png

Decide what background colour you want to use and apply it to the button along with the overlay you just made.

background:url(overlay.png) repeat-x center #ffcc00;

This gives us a nice yellow background with a glossy overlay.

Border

Now get rid of that horrible outset border. Let’s give it a fine border that matches the background colour.

border:1px solid #ffcc00;

Rounded corners

Make your button a bit friendlier by giving it rounded corners. This is where Webkit and Mozilla browser users will take advantage, while IE browsers will be stuck with sharp corners.

-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;

Starting to look good eh? But a good designer likes to pay attention to detail.

Pixel perfection

Now finish off the button with some pixel perfect embossing. We’re going to give it a 1 pixel border and a 1 pixel inset shadow.

border-bottom:1px solid #9f9f9f;
-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);

Notice how we’re using RGBA colours here. This allows us to apply alpha opacity to the colour. In this case, we’re giving white a 50% opacity.

Make it clickable

We know it’s a button and that it can be clicked but users might not. Change the cursor to a pointer so users know they can click it.

cursor:pointer;

Hover state

We now have a pretty sexy looking button. But what about a hover state?

To save us from thinking about a colour for the hover state, we can use the RGBA approach. Let’s revisit the background style. Add this after your background declaration.

background-color:rgba(255,204,0,1);

Nothing changes. All we did was change it to the same colour but using RGBA.

But how for the button’s hover state, give it the same background colour but alter the opacity slightly.

button:hover{background-color:rgba(255,204,0,0.8);}

This gives us a slightly different shade of background on hover, giving the user some feedback so they know they’ve hovered over a clickable button.

Put it all together

The final code.

button{
color:#08233e;
font:2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif;
padding:14px;
background:url(images/splash/button.png) repeat-x center #ffcc00;background-color:rgba(255,204,0,1);
border:1px solid #ffcc00;
-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;
border-bottom:1px solid #9f9f9f;
-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
cursor:pointer;
}

button:hover{background-color:rgba(255,204,0,0.8);}

button:active{position:relative;top:2px;}

I’ve slipped in an active state as well for the button so the user knows when they’ve clicked it.

This is how it looks in Firefox:

And this is an active preview.

Remember the button is reusable so if you apply a class to the button, e.g. class=”save”, you can apply a different colour to this button.

button.save{
background-color:#a7dd32;background-color:rgba(167,221,50,1);
border-color:#a7dd32;
}

button.save:hover{
background-color:rgba(167,221,50,0.8);
}

And you’d get something like this.

But what about Internet Explorer?

Yes, unfortunately IE users won’t get the full benefits of the sexy button. However, it doesn’t look that bad and to IE users it will seem like there is nothing wrong.

And IE6? It doesn’t support PNG transparency so you can remove the overlay background image with an IE6 conditional stylesheet.

Then in ie.css:

button{background-image:none !important;}

And there you have it. A beautifully designed button using (pretty much) only CSS.

Web Design Trends: Designing Out Of The Box

Lee — Tue, 07 Apr 2009 09:00:49 +0000

This is a creative trend catching on. It’s very simple to do but adds an extra element of character and uniqueness to a design.

Take a look at how to implement this ‘out of the box’ technique and a list of creative websites that are using it.

Setup

First setup your page and graphic. I’m using this graphic.

The HTML for my page is like so:

And the CSS looks like this:

body{
background:#999999;
}

#container{
width:960px;
background:#fff;
margin:20px auto;
padding:10px;
}

Here’s a preview of what we have so far:

Positioning is relative

When we position the logo we want the positioning to be relative to the container, therefore make the position relative:

#container{
width:960px;
background:#fff;
margin:20px auto;
padding:10px;
position:relative;
}

Position it outside the box

Now all you have to do is position your logo. Place it horizontally so the tag sticks out of the container.

#logo{
position:absolute;
left:-15px;
}

Now we have our logo sitting outside the box. Easy!

15 creative designs using the ‘out of the box’ technique

Matt Mullenweg

Feel free to share your thoughts on this and other emerging trends.

Call To Action Buttons

Lee — Mon, 15 Dec 2008 12:06:01 +0000

Call to action buttons are the buttons that you, as a web designer, want all your users to click on when they land on your page. Usually they’ll be a link to a download, signup or sale.

Seth Godin (The Big Red Fez) calls them bananas and your users are the monkeys. The objective is for the monkey to find the banana in less than 3 seconds (before they give up and leave). “Force yourself to design each and every page with one and only one primary objective. That’s the banana. Make it big. Make it blue (or red). Make it obvious.”

This post discusses how to design the perfect ‘call to action’ button and showcases 30 examples of good call to action button designs.

How to design the perfect call to action button

Force yourself to design each and every page with one and only one primary objective. - Seth Godin

Your call to action button needs to be obvious and jump out at the user. Here’s 5 characteristics of a good call to action button.

1. Colour

The colour should stand out from the rest of the page, and is therefore usually a brighter, contrasting colour.

2. Location

It should be located where the user would expect to find it easily. Above the fold, beside a product, in the header, top right navigation; it should be obvious and not hard to find.

3. Language

The language you use to communicate with your user is important. It should be short, to the point (no waffling) and should start with an action verb like signup, download, create, try etc.

And give the user a reason to click on your call to action button, ‘free‘ being the number one incentive.

4. Size matters

To make it obvious that it’s your most important button and that you want users to click on it, make it bigger than any other button and give the user as much area as possible to click on.

5. Room to breathe

Your button shouldn’t be overcrowded with other elements. It needs sufficient margins so it can be distinguished and the text needs enough padding so it’s easy to read.

Showcase of good examples of call to action buttons

1. Things

2. WordPress e-Commerce

3. Skype

4. PB Wiki

5. Exceptional

6. PicsEngine

7. InCase

8. GoodBarry

9. Plan HQ

10. TypePad

11. Mozilla Firefox

12. 37 Signals

13. Hambo Design

14. Cake PHP

15. Traffik

16. Boag World

17. Donor Tools

18. Luke Larsen

19. Square Space

20. Wu Foo

21. Barack Obama

22. Freshbooks

23. Crazy Egg

24. Web Notes

25. Campaign Monitor

26. Light CMS

27. Litmus

28. Stumble Upon

29. Remember The Milk

30. Ekklesia 360

Web Design Trends: Sunbursts and Sun Rays

Lee — Tue, 09 Dec 2008 09:00:34 +0000

Sunbursts are a very popular design trend within web and graphic design. A sunburst represents sun rays (or beams) exploding from a source point. They’re a Web 2.0 trend but they tend to work well with other graphical elements.

This post looks at how to create your own sunbursts, using existing Photoshop shapes and brushes and I’ve showcased 15 beautiful websites that include the sunburst effect in some shape or form.