Back to article overview

Tutorial: CTA button without images using CSS3 and Entypo


Why not use images?

This button is made from 100% CSS and uses Entypo for the white arrow symbol. See this website for a usefull overview of the Entypo symbols.

Buttons without images are more flexible, require less data to be downloaded and are easily changed and updated. CTA button made in CSS fit perfectly in a Adaptive webdesign strategy.


See the button liveM
Read the tutorialó
Download the codex
Hire my services+
 

What we will create:

The button in modern browsers:

The button will look fine in all modern browsers, on the right you see the hover state.

Buttons in modern browsers

The button in IE9:

IE9 will not display the gradients:

Buttons in IE9

The button in IE8 or lower:

IE8 and lower will not have rounded corners.

Buttons in IE8

How to fix this in IE

You could make the case that effects like gradients and rounded corners are not critical to the CTA button, Users of IE8 or IE9 will knot know what you are missing and the CTA button is 100% functional. This way of thinking is part of Adaptive webdesign.

If you really need these effects in IE check out: CSS3PIE wich uses some Javascript to create these effects in IE.

The tutorial

The button HTML:

<div class="cta_btn">
	<a href="#">
		LOOK MA, no images!
		<span>é</span>
	</a>
</div>

The full CSS:

@font-face {
	font-family: 'EntypoRegular';
	src: url('entypo-webfont.eot');
	src: url('entypo-webfont.eot?#iefix') format('embedded-opentype'),
	     url('entypo-webfont.woff') format('woff'),
	     url('entypo-webfont.ttf') format('truetype'),
	     url('entypo-webfont.svg#EntypoRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}
.cta_btn a {
	color: #ffffff;
	text-shadow: 0 1px 0 #444444;
	border: 1px solid #057294;
	text-decoration: none;
	position: relative;
	font-size: 26px;
	font-weight: normal;
	text-align: center;
	padding: 8px 65px 9px 25px;
	background: #057294;
	background: -webkit-linear-gradient(top, #179cc6 0%, #057294 100%);
	background: -moz-linear-gradient(top, #179cc6 0%, #057294 100%);
	background: -o-linear-gradient(top, #179cc6 0%, #057294 100%);
	background: -ms-linear-gradient(top, #179cc6 0%, #057294 100%);
	background: linear-gradient(top, #179cc6 0%, #057294 100%);
	-webkit-border-radius: 30px 30px 30px 30px;
	-moz-border-radius: 30px 30px 30px 30px;
	border-radius: 30px 30px 30px 30px;
	-webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.6);
	-moz-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.6);
	box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.6);
}
.cta_btn a:hover {
	background: #179cc6;
	background: -webkit-linear-gradient(top, #057294 0%, #179cc6 100%);
	background: -moz-linear-gradient(top, #057294 0%, #179cc6 100%);
	background: -o-linear-gradient(top, #057294 0%, #179cc6 100%);
	background: -ms-linear-gradient(top, #057294 0%, #179cc6 100%);
	background: linear-gradient(top, #057294 0%, #179cc6 100%);
}
.cta_btn a:active {
	position: relative;
  	top: 1px;
}
.cta_btn span {
	font-family: 'EntypoRegular';
	font-size: 55px;
	line-height: 20px;
	padding: 4px 0px 4px 1px;
	width: 37px;
	height: 30px;
	position: absolute;
	top: 7px;
	right: 9px;
	color: #ffffff;
	text-shadow: 0 1px 0 #444444;
	border: 1px solid #046988;
	background: #60b2cd;
	background: -webkit-linear-gradient(top, #046988 0%, #60b2cd 100%);
	background: -moz-linear-gradient(top, #046988 0%, #60b2cd 100%);
	background: -o-linear-gradient(top, #046988 0%, #60b2cd 100%);
	background: -ms-linear-gradient(top, #046988 0%, #60b2cd 100%);
	background: linear-gradient(top, #046988 0%, #60b2cd 100%);
	-webkit-border-radius: 17px 17px 17px 17px;
	-moz-border-radius: 17px 17px 17px 17px;
	border-radius: 17px 17px 17px 17px;
	-webkit-box-shadow: inset 0px 3px 6px rgba(5, 114, 148, 0.8);
	-moz-box-shadow: inset 0px 3px 6px rgba(5, 114, 148, 0.8);
	box-shadow: inset 0px 3px 6px rgba(5, 114, 148, 0.8);
}

The CSS step by step:

Adding Entypo to the site

At the top if the css file we use @font-face to add the Entypo font. Please go here to download the font files and place them in the same place you have the css file.

@font-face {
	font-family: 'EntypoRegular';
	src: url('entypo-webfont.eot');
	src: url('entypo-webfont.eot?#iefix') format('embedded-opentype'),
	     url('entypo-webfont.woff') format('woff'),
	     url('entypo-webfont.ttf') format('truetype'),
	     url('entypo-webfont.svg#EntypoRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}

Link styling

We use the class of cta_btn to the container of the link.

.cta_btn a {
	color: #ffffff;
	text-shadow: 0 1px 0 #444444;
	border: 1px solid #057294;
	text-decoration: none;
	position: relative;
	font-size: 26px;
	font-weight: normal;
	text-align: center;
	padding: 8px 65px 9px 25px;
	background: #057294;
	background: -webkit-linear-gradient(top, #179cc6 0%, #057294 100%);
	background: -moz-linear-gradient(top, #179cc6 0%, #057294 100%);
	background: -o-linear-gradient(top, #179cc6 0%, #057294 100%);
	background: -ms-linear-gradient(top, #179cc6 0%, #057294 100%);
	background: linear-gradient(top, #179cc6 0%, #057294 100%);
	-webkit-border-radius: 30px 30px 30px 30px;
	-moz-border-radius: 30px 30px 30px 30px;
	border-radius: 30px 30px 30px 30px;
	-webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.6);
	-moz-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.6);
	box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.6);
}
  1. Change the link color to white and add a nice text shadow.
    		color: #ffffff;
    		text-shadow: 0 1px 0 #444444;
  2. Add a border to the button.
    border: 1px solid #057294;
  3. Remove link underline.
    text-decoration: none;
  4. Give the button a relative position to allow the arrow to be positioned.
    position: relative;
  5. Set a large font-size, make the font weight normal and center the text.
    		font-size: 26px;
    		font-weight: normal;
    		text-align: center;
  6. Give the button padding.
    padding: 8px 65px 9px 25px;
  7. A background gradient, we add support for various browsers.
    		background: #057294;
    		background: -webkit-linear-gradient(top, #179cc6 0%, #057294 100%);
    		background: -moz-linear-gradient(top, #179cc6 0%, #057294 100%);
    		background: -o-linear-gradient(top, #179cc6 0%, #057294 100%);
    		background: -ms-linear-gradient(top, #179cc6 0%, #057294 100%);
    		background: linear-gradient(top, #179cc6 0%, #057294 100%);
  8. Add rounded corners.
    		-webkit-border-radius: 30px 30px 30px 30px;
    		-moz-border-radius: 30px 30px 30px 30px;
    		border-radius: 30px 30px 30px 30px;
  9. Add de shadow to the button.
    		-webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.6);
    		-moz-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.6);
    		box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.6);

Link hover styling

For the hover state we want to invert the background gradient.

.cta_btn a:hover {
	background: #179cc6;
	background: -webkit-linear-gradient(top, #057294 0%, #179cc6 100%);
	background: -moz-linear-gradient(top, #057294 0%, #179cc6 100%);
	background: -o-linear-gradient(top, #057294 0%, #179cc6 100%);
	background: -ms-linear-gradient(top, #057294 0%, #179cc6 100%);
	background: linear-gradient(top, #057294 0%, #179cc6 100%);
}
  1. Invert the background gradient.
    		background: #179cc6;
    		background: -webkit-linear-gradient(top, #057294 0%, #179cc6 100%);
    		background: -moz-linear-gradient(top, #057294 0%, #179cc6 100%);
    		background: -o-linear-gradient(top, #057294 0%, #179cc6 100%);
    		background: -ms-linear-gradient(top, #057294 0%, #179cc6 100%);
    		background: linear-gradient(top, #057294 0%, #179cc6 100%);

Link active styling

We add a nice active state by adding a effect of a pressed button.

.cta_btn a:active {
	position: relative;
  	top: 1px;
}
  1. Give the active state a relative position.
    		position: relative;
  2. Move the button 1px down on hover, to give a pressed button effect.
    		top: 1px;

Add the arrow icon

Insted of adding a arrow image, we will use a absolute positioned CSS circle with a icon created by a font.

.cta_btn span {
	font-family: 'EntypoRegular';
	font-size: 55px;
	line-height: 20px;
	padding: 4px 0px 4px 1px;
	width: 37px;
	height: 30px;
	position: absolute;
	top: 7px;
	right: 9px;
	color: #ffffff;
	text-shadow: 0 1px 0 #444444;
	border: 1px solid #046988;
	background: #60b2cd;
	background: -webkit-linear-gradient(top, #046988 0%, #60b2cd 100%);
	background: -moz-linear-gradient(top, #046988 0%, #60b2cd 100%);
	background: -o-linear-gradient(top, #046988 0%, #60b2cd 100%);
	background: -ms-linear-gradient(top, #046988 0%, #60b2cd 100%);
	background: linear-gradient(top, #046988 0%, #60b2cd 100%);
	-webkit-border-radius: 25px 25px 25px 25px;
	-moz-border-radius: 25px 25px 25px 25px;
	border-radius: 25px 25px 25px 25px;
	-webkit-box-shadow: inset 0px 3px 6px rgba(5, 114, 148, 0.8);
	-moz-box-shadow: inset 0px 3px 6px rgba(5, 114, 148, 0.8);
	box-shadow: inset 0px 3px 6px rgba(5, 114, 148, 0.8);
}
  1. Assign the Entypo font to the span element and give the font a good size and color.
    		font-family: 'EntypoRegular';
    		font-size: 55px;
    		line-height: 20px;
    		color: #ffffff;
    		text-shadow: 0 1px 0 #444444;
  2. Add some padding top position the symbol.
    		padding: 4px 0px 4px 1px;
  3. Give the element a height and with to form a 38 by 38 px square.
    		width: 37px;
    		height: 30px;
  4. Position the element to the right of the button, vertically centered.
    		position: absolute;
    		top: 7px;
    		right: 9px;
  5. Add a border ro the element.
    		border: 1px solid #046988;
  6. Give the element a background gradient.
    		background: #60b2cd;
    		background: -webkit-linear-gradient(top, #046988 0%, #60b2cd 100%);
    		background: -moz-linear-gradient(top, #046988 0%, #60b2cd 100%);
    		background: -o-linear-gradient(top, #046988 0%, #60b2cd 100%);
    		background: -ms-linear-gradient(top, #046988 0%, #60b2cd 100%);
    		background: linear-gradient(top, #046988 0%, #60b2cd 100%);
  7. Make the element a cricle by making the radius 17px.
    		-webkit-border-radius: 17px 17px 17px 17px;
    		-moz-border-radius: 17px 17px 17px 17px;
    		border-radius: 17px 17px 17px 17px;
  8. Add a nice inner shadow effect to the circle.
    		-webkit-box-shadow: inset 0px 3px 6px rgba(5, 114, 148, 0.8);
    		-moz-box-shadow: inset 0px 3px 6px rgba(5, 114, 148, 0.8);
    		box-shadow: inset 0px 3px 6px rgba(5, 114, 148, 0.8);

The tutorial links


See the button liveM
Read the tutorialó
Download the codex
Hire my services+
 

I hope you find this example usefull, please give it a try and let me know what you think!