Best SEO CompaniesLooking back 5 or 10 years ago the process of designing website buttons was very tedious. CSS could handle a lot of the outer edges, but gradient backgrounds and icons required static images. And these newer design trends are still at the cusp of innovation. This means you will find plenty of modern websites still using images in place of CSS3 effects.
I want to focus this tutorial on the power of CSS3 icon fonts for designing user interfaces. We will be creating some generic CSS3 buttons with added icons for design aesthetics. However the icons will not be loaded from static images or sprite sheets. Instead we will be using the Entypo icons font for generating pictogram icon inside your website layout.
Table of Contents
Setting the Project Space
We should start out by putting together a working directory with all our files. I have created 2 documents index.html and styles.css. Also we need to download a copy of the Entypo fonts which you can get directly off their website. Windows users will get a .zip package while OS X users will have a DMG image file.
When it is all extracted you will find a series of folders with copies of the fonts. These are actually different versions to be used for very different purposes. Be sure that you are copying the files out of @font-face which are to be used on the web. The Desktop typeface is to be installed on your computer and the vector graphics would be useful in editors such as Adobe Photoshop.
I have copied all the font files into a new directory named font which we can access from the CSS codes. But first we should look into my HTML doc and see how to create the basic layout.
Building the Document
We are not including too many external libraries as they are not needed in this tutorial. However I am using the Google Webfont named Purple Purse for the heading text. Our document is coded using HTML5 doctype for greater support using new elements on the page.
<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>CSS3 Buttons with Pictograms</title>
<meta name="author" content="Jake Rocheleau">
<link rel="shortcut icon" href="https://www.bestseocompanies.com/favicon.ico">
<link rel="icon" href="https://www.bestseocompanies.com/favicon.ico">
<link rel="stylesheet" type="text/css" media="all" href="styles.css">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Purple+Purse">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>Now the most important bit of code is related to the button syntax. I have setup a generic button class using the name .entypo but you can update this for your own site. We setup default grey buttons with opacity so the colors will show through the backgrounds. Let’s take a peek at some of the blue buttons on the page.
<button class="entypo blue"><span class="pictogram"></span> Blue Archives</button>
<button class="entypo blue"><span class="pictogram"></span> Tags</button>
<button class="entypo blue"><span class="pictogram">👍</span> Likes This!</button>
The icons themselves are encapsulated inside a span tag within the button text. We need to use some fancy maneuvering for the line-height and padding to get everything aligned properly. Keep this in mind when porting the icons over into bigger or smaller sizes.
The map includes over 200 icons which you can use by adding the entity marker into HTML which uses the Entypo font family. I find that since we are using the same characters in code it helps search engines to identify the content(as opposed to using images).
Include Custom CSS Fonts for Pictogram Icon
Although we are using the external Google webfont document this should not conflict with any local @font-face declarations. Let’s take a peek inside the stylesheet and see how I have this setup.
@font-face {
font-family: 'EntypoRegular';
src: url('font/entypo.eot');
src: url('font/entypo.eot?#iefix') format('embedded-opentype'),
url('font/entypo.woff') format('woff'),
url('font/entypo.ttf') format('truetype'),
url('font/entypo.svg#EntypoRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'EntypoSocial';
src: url('font/entypo-social.eot');
src: url('font/entypo-social.eot?#iefix') format('embedded-opentype'),
url('font/entypo-social.woff') format('woff'),
url('font/entypo-social.ttf') format('truetype'),
url('font/entypo-social.svg#EntypoRegular') format('svg');
font-weight: normal;
font-style: normal;
}I have two distinct code blocks setup for the regular Entypo font along with the Entypo Social pack. This 2nd set will include icons for popular social media websites like Twitter, Github, Dribbble, and so forth. Also the kit includes all four of the base CSS3 typefaces which are EOT, TTF, WOFF, and SVG. It is rare to find an icon font which includes all the standard file types so we definitely want to support all the options.
After these blocks you will find a series of CSS resets which are necessary for defining the page structure. Then eventually we come down to the button styles which are using transparent backgrounds for design effects. This is a nice technique for building classes on your website which allows you to extend CSS functionality based on any color scheme.
button.entypo {
display: inline-block;
margin: 0;
margin-right: 12px;
cursor: pointer;
border: 1px solid #bbb;
overflow: visible;
color: #fff;
padding: 11px 25px;
font-size: 1.7em;
line-height: 1.55em;
vertical-align: middle;
text-decoration: none;
white-space: nowrap;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition: all .15s linear;
-moz-transition: all .15s linear;
transition: all .15s linear;
text-shadow: 1px 0 0 rgba(0,0,0,0.35);
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.3)), to(rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));
background-image: -moz-linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));
background-image: -ms-linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));
background-image: -o-linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));
background-image: linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));
}
button.entypo:active {
box-shadow: 0 1px 1px rgba(0,0,0,0.35) inset;
}Generating CSS3 Buttons
Keep in mind that many of these properties will only be supported by newer CSS3-compliant browsers. Older versions of Internet Explorer may struggle to render everything properly. But the secret to keeping our buttons transparent is to use rgba() syntax when defining colors for the gradient backgrounds.
This means the colors go from 0 opacity to 30% using #ffffff the whole time. It provides a background template for the colors to fill into and then generates a glossy effect. We can see the additional color classes and their hover/active states in the codes which follow.
/** Green Color Scheme **/
button.green {
background-color: #57a957;
border-color: #57a957;
}
button.green:hover {
background-color: #62c462;
}
button.green:active {
background: #57a957;
}
/** Blue Color Scheme **/
button.blue {
background-color: #269ce9;
border-color: #269ce9;
}
button.blue:hover {
background-color: #70b9e8;
}
button.blue:active {
background-color: #269ce9;
}
/** Orange Color Scheme **/
button.orange {
background-color: #e9942e;
border-color: #d48a30;
}
button.orange:hover {
background-color: #ee9f40;
}
button.orange:active {
background-color: #d48a30;
}
/** Pink Color Scheme **/
button.pink {
background-color: #ed4cd1;
border-color: #d22ec1;
}
button.pink:hover {
background-color: #ec69d5;
}
button.pink:active {
background-color: #d22ec1;
}The final magical piece to our stylesheet comes from implementing our new font family choices. Remember that each of the icon entities is encapsulated within a span using the classes .pictogram and .socialpictos. Each of these is referring to a different CSS3 font family which we defined at the top of our stylesheet.
/** Entypo Icons **/
.pictogram {
font-family: 'EntypoRegular';
float: left;
position: relative;
top: 0;
left: -9px;
font-size: 3.0em;
line-height: 0.5em;
font-weight: normal;
vertical-align: middle;
}
.socialpictos {
font-family: 'EntypoSocial';
float: left;
position: relative;
top: 0;
left: -9px;
font-size: 3.0em;
line-height: 0.5em;
font-weight: normal;
vertical-align: middle;
}Notice how the icons are positioned relative and we need to push them away from the original text. This could be done using margins, but in some browsers the extra space doesn’t work correctly or the margins don’t appear at all. Middle vertical alignment and a line-height value of 0.5em allows the button to keep its original size while still centering our pictogram icons. These CSS3 button styles work brilliantly and may be copied over and over for duplicating results.
Final Thoughts
Be sure and check out my live demo sample to catch a glimpse at what we are trying to build. The codes are not overly complex and most web developers should be able to follow along. Feel free to download a copy of my source code and edit this to fit your own needs. All of my original codes are released under public domain and can be modified for use on any projects.
The Entypo font package is wonderful and fits nicely within other open source resources for talented developers. If you have any additional thoughts or questions please share with us in the post discussion area below.
Best SEO Companies