By

Make a CSS3 button with an arrow using Pseudo-elements

Today I was working on a client site, and I wanted to make a button that looked like this:

CSS3 button with arrow

It’s a pretty typical iTunes style button except for the little triangle.

Since the site was in WordPress, I needed a flexible solution that would work with different button sizes, widths, text, etc.

There are several possible solutions for this, but I thought the best/easiest one was to use the :after Pseudo-element combined with the content property. This allows you to magically insert content (such as an image) and style it without adding anything to your HTML.

Here’s the good stuff.

HTML Markup

1
<a class="button" href="#">Learn More</a>

Clean and simple. Here’s the default CSS for the button without the triangle (not so simple, oh well):

Button CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.button {
	display: block;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: bold 14px/100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	overflow: hidden;
	padding: .4em 1em .5em 1em;
	margin: 10px 0;
	background: #3b88d8;
	background: -moz-linear-gradient(0% 100% 90deg, #377ad0, #52a8e8);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#52a8e8), to(#377ad0));
	border-top: 1px solid #4081af;
	border-right: 1px solid #2e69a3;
	border-bottom: 1px solid #20559a;
	border-left: 1px solid #2e69a3;
	-moz-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
	-webkit-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
	box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
	color: #fff;
	text-shadow: 0 -1px 1px #3275bc;
	-webkit-background-clip: padding-box;
}

That gives you the blue button without the triangle. Here’s how we add the triangle with the :after Pseudo-element:

CSS for the triangle

1
2
3
4
5
6
7
.button:after {
        content: url(images/white-rt-triangle.png);
        width: 8px;
        height: 10px;
        float: right;
        margin: 1px 0 0 10px;
}

Pretty simple, you add the image with the content property, then you style it just like any other element. Boom! Triangle button domination.

The Whole Enchilada

Here’s the full CSS with :hover and :active states on the button:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
.button {
	display: inline-block;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: bold 14px/100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	overflow: hidden;
	padding: .4em 1em .5em 1em;
	margin: 10px 0;
	background: #3b88d8;
	background: -moz-linear-gradient(0% 100% 90deg, #377ad0, #52a8e8);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#52a8e8), to(#377ad0));
	border-top: 1px solid #4081af;
	border-right: 1px solid #2e69a3;
	border-bottom: 1px solid #20559a;
	border-left: 1px solid #2e69a3;
	-moz-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
	-webkit-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
	box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
	color: #fff;
	text-shadow: 0 -1px 1px #3275bc;
	-webkit-background-clip: padding-box;
}
 
.button:hover {
	background: #2a81d7;
	background: -moz-linear-gradient(0% 100% 90deg, #206bcb, #3e9ee5);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3e9ee5), to(#206bcb));
	border-top: 1px solid #2a73a6;
	border-right: 1px solid #165899;
	border-bottom: 1px solid #07428f;
	border-left: 1px solid #165899;
	-moz-box-shadow: inset 0 1px 0 0 #62b1e9;
	-webkit-box-shadow: inset 0 1px 0 0 #62b1e9;
	cursor: pointer;
	text-shadow: 0 -1px 1px #1d62ab;
	-webkit-background-clip: padding-box;
}
 
.button:active {
	background: #3282d3;
	border: 1px solid #154c8c;
	border-bottom: 1px solid #0e408e;
	-moz-box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 #fff;
	-webkit-box-shadow: inset 0 0 6px 3px #1657b5, 0 1px 0 0 #fff;
	text-shadow: 0 -1px 1px #2361a4;
	-webkit-background-clip: padding-box;
}
 
.button:after {
        content: url(images/white-rt-triangle.png);
        width: 8px;
        height: 10px;
        float: right;
        margin: 1px 0 0 10px;
}

By

Create CSS Icons Using Pseudo-Classes and the Content Property

Displaying icons consistently across your website can be a mind-numbing task.

Using <img> tags is a terrible way to do it, and creating complex CSS with background images is a pain.

Enter the :before pseudo-class. The :before pseudo-class combined with the content property is great for displaying icons like this:

PDF Download
MP3 Download

Or like this:

Title With Icon

A Smaller Title With Icon

Pseudo-classes have been around since CSS1 way back in 1996. The great part about the :before class is that it is supported in all major browsers, IE included! (Just make sure you declare a !DOCTYPE or it won’t work in IE8.)

Getting Started

Step One

Get some icons and upload a few to your images folder. Between 22px and 32px square should work best, depending on your application.

Step Two

Create your html:

<a class="icon pdficon">PDF Download</a>

Using two different classes allows you to write less CSS if you are reusing this across your site.

Step Three

Add your CSS. We’ll apply the global styles using the .icon class, and display the image using the a.pdficon:before class.

You’ll notice the blue box included in the .icon code, you can ignore this if you want. The important part is in the a.pdficon:before styles.

.icon {
display: block;
padding: 5px 8px;
background: #e6effa;
border: 1px solid #bdd0e8;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

.icon:hover {
background: #f4f8fd;
}

a.pdficon:before {
content: url(images/pdf-22.png);
display: block;
float: left;
margin-right: 5px;
position: relative;
bottom: 2px;
}

That’s it! Just change the a.pdficon:before class to something else to display a different image. For example, the code for the MP3 download above is:

a.mp3icon:before {
content: url(images/itunes.png);
display: block;
float: left;
margin-right: 5px;
position: relative;
bottom: 2px;
}

Notice the relative positioning – this is not always necessary, it just depends on how your icon is lining up.

Titles with Icons

The titles are the same concept, just slightly different code. Here’s the HTML from the larger title above:

<h2 class="widgeticon">Title With Icon</h2>

Here’s the CSS:

h2.widgeticon:before {
content: url(images/help-32.png);
display: block;
float: left;
margin-right: 5px;
}

Now go get cracking!