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;
}