Sleek CSS3 Close Button in 10 Minutes

While designing Skyline Design’s page for viewing individual portfolio projects, I needed to add a feature that would enable users to close a description box in order to fully bask in the beauty of the designs being showcased.

While thinking of a solution, I recalled something similar I had seen on the SALT Branding web site. There’s an X in a red box on the top left corner of their content area which animates to show the word “close” when you hover over it.

Inspiration from the close button on SALT’s site

Here's what we'll be creating. View Demo

What we’ll be creating.
View Demo

Salt’s site is all flash based, so the button was flash animated. I was tempted to Google a quick solution but on second thought, I decided I might as well be innovative if not original. Therefore, with a rough idea in mind, and with so much more coding to do, I decided that I would create a close button using SALT as inspiration.

The aim was to take the shortest route possible (if you aint heard, laziness is a virtue among coders) which meant writing the least amount of code in the least amount of time. No images, no flash, no JavaScript. Just CSS3.

The Concept

The sketch below shows how the button is to be put together.

It always helps to visualize how the code will work

The Markup

<div id="demo-box"><a id="chips-funga" href="#">Close<em>X</em></a>
<!-- text can go here --></div>

As little html markup as possible! Of course, the code snippet above must be placed within the body tags in a document that has all the expected default code like a doctype and opening/closing html tags. The demo-box is also just housing our link, and is the container for text that should be hidden by clicking the close button. You could also use the html5 article tag instead of the chips-funga div, but for the sake of keeping the tutorial simple, let’s just use a div.

The Styling

With our markup in place, all we have to do now is style it exactly the way we want it to look. First, let’s style our container. We’ll put it in the middle of the page as shown in the demo.


/* The container */

#demo-box {
	width: 350px;
	height: 200px;
	background: #fff;
	position: relative; /* see NB below */
	margin: 100px auto 0;

	-webkit-box-shadow: 3px 3px 0 #ddd;
	-moz-box-shadow: 3px 3px 0 #ddd;
	box-shadow: 3px 3px 0 #ddd;
}

Again, we’re assuming that this CSS code is properly placed in the head of the document, whether within style tags or by being linked to an external style sheet (The latter should be used as much as possible).

Note that we have added position:relative to the container box.

In CSS, if we want to precisely (absolutely) position an element B within a certain container A, we have to set A’s position to relative and B’s position to absolute. If we don’t, B will be placed absolutely in relation to the browser’s window.

Finally, we style our button. Watch it take shape as you add each line of CSS. Let’s start with styling the overall link:


a#chips-funga {
background: #c0eaf7;
color: #fff;
display: block;
font-size: 11px;
height: 16px;
line-height: 16px;
overflow: hidden;
position: absolute;
right: 7px;
text-indent: -9999px; /* hide "close" text */
top: 5px;
width: 16px;
z-index: 6;
}

Next, let’s style the “x” box:


a#chips-funga em {
background: #3cc1ea;
color: #fff;
display: inline-block;
float: right;
font-family: Tahoma, Geneva, sans-serif;
font-size: 8px;
font-style: normal;
height: 16px;
margin-left: 10px;
text-align: center;
text-indent: 0; /* override to show "x" */
width: 16px; /* same as a#chips-funga */
}

Now let’s determine how they’ll look when the user hovers over them:


a#chips-funga:hover {
padding-left: 10px;
text-indent: 0; /* override and show "close" text */
width: 60px; /* override width to show "close" */
}

a#chips-funga:hover em {
background: #209abf;
}

At this point, we have a functional button that opens to show the “close” text when we hover over it. This is as exciting as it gets if you use Internet Explorer (yea, even Microsoft hates IE). However, for those of us with modern browsers, we can add smooth transition effects that mimic JavaScript, enabling us to animate the opening and closing of the button.

So in summary, with the same xhtml markup that we started with, the following CSS (all combined) should give you the desired effect.


/* The container */

#demo-box {
width: 350px;
height: 200px;
background: #fff;
position: relative;
margin: 100px auto 0;

-webkit-box-shadow: 3px 3px 0 #ddd;
-moz-box-shadow: 3px 3px 0 #ddd;
border-box-shadow: 3px 3px 0 #ddd;
}

/* The close button */

a#chips-funga {
background: #c0eaf7;
color: #fff;
display: block;
font-size: 11px;
height: 16px;
line-height: 16px;
overflow: hidden;
position: absolute;
right: 7px;
text-indent: -9999px;
top: 5px;
width: 16px;
z-index: 6;

-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px
}

a#chips-funga em {
background: #3cc1ea;
color: #fff;
display: inline-block;
float: right;
font-family: Tahoma, Geneva, sans-serif;
font-size: 8px;
font-style: normal;
height: 16px;
margin-left: 10px;
text-align: center;
text-indent: 0;
width: 16px;

-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px
}

/* Hover states */

a#chips-funga:hover {
padding-left: 10px;
text-indent: 0;
width: 60px
}

a#chips-funga:hover em {
background: #209abf;

-webkit-border-top-left-radius: 0;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius-topleft: 0;
-moz-border-radius-bottomleft: 0
}

Summary

And that’s it! We have a nice animated close button within minutes. Now all you have to do is control how the hiding will happen with JavaScript, which is another tutorial in itself. Check out the demo, and we’d be glad if you could share this resource. Happy coding!

View Demo

  • awesome stuff except for beginners like me we are floating all through. could you like do a beginners thing like making a basic site?

    • There’s so many beginner tutorials out there I feel like I’ll be reinventing the wheel. But you know what, perhaps I’ll write a series on how to design and code a Kenyan site. But only if the demand is there…

  • I just love your new website…

    So professional mpaka naskia kiwaru!

    Cool tut too… al be sure to try it out. Does this now mean we should expect constant updates on this blog?

    • Thanks, man! No need for kiwaru, you know who we do this for :-). And yes, expect a lot more frequent posts on the blog now, Lord willing.

  • Niick116

    Niiiiiiiiiice… awesome stuff!!! keep em’ coming

    • Thanks bro. Kabisa kabisa, more lined up n coming soon.

  • Kush

    Noma mazae ata kaa nime float all through, good job

signed. martians.™