Code Theory

We’ve already covered how to create animated buttons, but if you’re looking to take your button animations and animation functionality to the next level, you’ll want to take a look at this tutorial that demonstrates how to make stylish download buttons that utilize smooth CSS animations.

The HTML

The download button has two parts — the button itself, and the tab that will appear under the button whenever the user hovers over it. Your HTML will need to account for both of these components. Here’s how it should look:

<a href="" class="download">Download</a>
<a href="" class="download bottom">File Size: 8MB</a>

Of course, the secondary tab (with the class “download bottom”) can say whatever you like. Keep in mind, however, that it does prove to be more aesthetically pleasing to have the secondary tab smaller than the button itself, so you might want to keep the content of the second tab short and to the point.

The CSS

Styling the button and the secondary tab is fairly easy and doesn’t require an excessive amount of CSS. Take a look at the code below to see for yourself.

body{
    font-family: 'Alegreya Sans';
    background: #708292;
}

a.download{
    text-decoration: none;
    color: #fff;
    background: #50a6f6;
    padding: 8px 10px;
    border-radius: 3px;
    display: block;
    width: 120px;
    margin: 100px auto 0 auto;
    text-align: center;
    z-index: 100;
    transition: opacity .8s ease;
}

a.download.bottom{
    width: 100px;
    background: #b7d4ee;
    opacity: 0;
    margin-top: 0px;
}

a.download.bottom{
    border-radius: 0 0 3px 3px;
}

As you can see, we make the secondary tab (a.download.bottom) invisible by giving it an opacity of 0. We also apply a transition effect to the primary button so that when the hover effect takes place, it happens with a nice smooth transition. This is what our button should look like at this point:

We’re only one like of CSS away from finishing the simple, sleek button. What’s missing is the instructions that will allow the secondary button to appear below the primary button when it’s hovered upon — basically, what’s missing is a hover effect.

The CSS code for the hover effect should look like this:

a.download:hover + .bottom{
    opacity: 1;
}

This code selects the secondary tab, but it only applies when the primary button is hovered upon. By changing the opacity from 0 to 1, it allows the secondary tab to appear smoothly (thanks to the transition effects we added before) whenever the primary “Download” button is hovered upon.

Here is what your button should look like at any point that you hover over it:

As always, color, size, font-family, and shape can be totally customized to suit any project or theme. Play around with this snippet to really make the button your own.

If you’re new to WordPress, the concepts of plugins, themes, widgets, etc might be a little overwhelming. There are definitely a lot of options and components that go into creating a WordPress site, and one of the best features of a WordPress site is the sheer number and versatility of the plugins available for use. Seriously, there’s a plugin for almost anything you can thing of — from really useful things like ecommerce integration, to less useful things like adding falling snowflakes to the pages of your WordPress site. If there’s a feature of functionality you want to add to your WP site, chances are there’s a plugin for that.

If you’re wondering how to install one of these plugins, there are a few different ways you can go about it. Keep on reading to learn more.

Search for a Plugin

The left-hand menu of your WordPress dashboard has a menu item called “Plugins.” If you hover over that link, you’ll see a few options. Click “Add New,” which will bring you to WordPress’s Plugin repository. You can browse through the Featured, Popular, and New plugin sections, or you can search specifically for a plugin or type of plugin by using the search bar in the top right corner of the page.

Once you’ve found the plugin you’re searching for, click the Install Now button in the top right hand corner of the plugin’s listing. The plugin will then be installed, and you’ll have the option of whether or not you’d like to activate it (most likely, you will want to), and then you’re free to start using it/configuring the settings.

(Note: depending on your hosting plan and how your permissions are configured, you may not be able to install plugins this way. If that’s the case, see the methods below).

Upload a Plugin

On the Add Plugins page, there’s also the option to upload a plugin (at the top of the page next to the Add Plugins title).

To upload a plugin, first you’ll have to have it downloaded onto your local machine. To download a plugin, you can use the official WordPress plugin repository page (or get a free or premium plugin downloaded or purchased from a third party site) and use it by searching the same way you searched through the repository on the Add Plugins page. The only difference between this page and the page on your dashboard is that the plugins in this repository download directly to your machine.

Once you’ve got your plugin on your computer, you can upload it using the “Upload Plugin” option. Make sure the plugin you want to upload is in a zip format, choose the file, and click “Install Now.” The plugin installation should then happen seamlessly, and you’ll again get the opportunity to activate the plugin.

Upload a Plugin via FTP

This is the option for manual plugin installation via an FTP client (if you don’t already have one, Filezilla is great). To install a plugin this way, you’ll need to make sure you have your desired plugin downloaded onto your local machine, just like in the process above — this is where the WordPress Plugin Repository will be useful to you again.

After you’ve got your plugin downloaded onto your computer, access your server by connecting via your FTP client, and navigate to the Plugins folder (wp-content/plugins). Use the transfer windows or just drag and drop the entire unzipped plugin folder into your plugin directory and wait as the files transfer. Once the transfer is complete, check the main plugin page on your WordPress dashboard to ensure that the plugin was uploaded, and activate it if you like.

So we already know how to create really cool pure CSS social media icons using Font Awesome, but what else can we do with this awesome icon library? One really cool way to utilize the icons is by using them in place of bullets when styling unordered lists.

Font Awesome is a library of hundreds of different icons and symbols that can be used for free by developers in any project. It’s a really useful tool to have, especially because using Font Awesome icons are almost always superior to using pngs or jpegs as icons because of how well the Font Awesome characters (color, size, etc) can be manipulated by CSS.

Using the Font Awesome icons in place of bullets or discs that are usually used to style unordered lists is a really cool way to add some unique flair to an otherwise boring list, and it’s also a pretty innovative way to use the Font Awesome library. Keep reading to see how it’s done.

Getting Font Awesome

Like most libraries, Font Awesome can be downloaded and placed onto your server, but the best and most lightweight way to use it is probably to link to the library directly, either in your head section or at the top of your stylesheets using the @import rule. Here’s the link you can insert into the head:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

The HTML

We’re gonna start by creating a standard unordered list. If you’re not sure how to build one, check out the HTML below:

<ul>
  <li>First list item</li>
  <li>Second list item</li>
  <li>Third list item</li>
  <li>Fourth list item</li>
  <li>Fifth list item</li>
</ul>

The results of which should look a little bit like this:

The CSS

The CSS is where you’ll get rid of the standard bullet points and replace them with a cool Font Awesome icon of your choice using the content property combined with the :before pseudo-selector. First, pick the Font Awesome icon you’d like to use as the list item icon. You can see all of the hundreds of Font Awesome icons to choose from on this page.

First, set the list-style-type to none:

li{
  list-style-type: none;
}

So now the list should have no bullets:

Now we’ll need to use the :before pseudo-selector to select the space before the list items, and the content property to insert the Font Awesome icons as the content before the list items.

In this case, let’s pretend we’re creating a list with a nautical theme, so our Font Awesome icon of choice might be the anchor icon, the unicode code of which is f13d. To use the anchor icon as the list item icon, use the following CSS:

li:before{
content: “\f13d”;
font-family: “FontAwesome”;
width: 10px;
height: 10px;
margin-right: 5px;
}

The results of which should look like this:

Don’t forget you can also add some color to these icons. Check it out:

li:before{
color: #147efb;
}

How’s that for a nautical themed list? There are so many Font Awesome icons available that the possibilities for styling your lists are practically endless. Definitely keep this technique in the back of your mind for when you’re looking to create some unique lists.

Font Awesome is a really useful tool that provides developers with free access to hundreds of different icons and symbols to use in the projects in place of images and pngs. The great thing about using Font Awesome icons is that because they’re technically characters instead of images, the colors and sizes of the characters can easily be customized using CSS style rules. You can even really easily add hover effects and styling for active and visited states by using the CSS pseudo elements (:hover, :active, :visited).

One really great way to take advantage of these Font Awesome icons is by using them to create social media icons — you know, those buttons you’ll find on almost every site that links to a site’s social media presences. Usually these are created in photoshop and uploaded to a server, but if you’re planning on creating simple or basic social media buttons, Font Awesome is a great, lightweight option to create them easily without having to use images. Keep reading to check out how it’s done.

Get Font Awesome Library

You can download the Font Awesome library and place it onto your server to link to, but if you want an even more lightweight option, you can simply link to their library in the <head> section of your HTML files or at the top of your StyleSheet using the @import rule. See the code you can use to link to the Font Awesome library below:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

The HTML

For this example, let’s create icons for Twitter, Facebook, and Instagram. To see a list of ALL the Font Awesome icons and their accompanying code, head over to this page. Here’s the HTML you’ll need to get started:

<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>

The results of the HTML above should look something like this:

The CSS

To really make these icons unique we need to add some styling. Let’s turn them into rounded icons, and let’s add some colors to reflect the brands of each social media network. Take a look at the CSS below to see how it’s done.

 i.fa.fa-facebook, i.fa.fa-twitter, i.fa.fa-instagram{
 border-radius: 100%;
 font-size: 28px;
 height: 38px;
 line-height: 40px;
 margin: 5px;
 text-align: center;
 width: 38px;
 }
 i.fa.fa-facebook{
 border: 1px solid #3B5998;
 color: #3B5998;
 }
 i.fa.fa-twitter{
 border: 1px solid #00aced;
 color: #00aced;
 }
 i.fa.fa-instagram{
 border: 1px solid #833ab4;
 color: #833ab4;
 }

After applying the CSS above, your social media icons should look similar to this:

Styled beautifully and reflecting the brand identity of each platform!

Extras: Hover Effects

Now that you’ve got your icons styled, adding hover, active, visited, etc effects using pseudo-selectors is really easy. A cool hover effect to add is to change the opacity of the icons when they’re hovered over. To do that, you just need to add the following CSS:

i.fa.fa-facebook:hover, i.fa.fa-twitter:hover, i.fa.fa-instagram:hover{
 opacity: .6;
}

Compare the icons in the image below with the one above, and you’ll see that the opacity of the Instagram icon is less opaque than the others or than the one in the image above — that’s because it has the hover effect applied to it.