How to Create a Stylish Download Button with CSS

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:

Screen Shot 2017-02-15 at 9.53.12 AM

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:

Screen Shot 2017-02-15 at 9.53.03 AM

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.

10 Best Free Icon Sets for Your Design Projects

If you’re a web developer or designer, chances are there are few things you love more than a good set of freebies. Free graphics are hardly hard to come by, but quality free brackets aren’t quite as common as you might hope. Luckily for you, we’ve curated this versatile list of free icon sets that will add dimension, color, and flair to any of your websites and designs. Keep reading to see if any of these sets might be right for you or one of your projects.

1. Free Shopping Cart Icons

Screen Shot 2017-02-08 at 1.32.25 PM

This collection of shopping related icons is perfect if you’re working on a retail or ecommerce project. The set comes with Add to Cart buttons, shopping cart icons, shopping bag icons, and some small shopping basket graphics. Definitely a good set to have in your arsenal, even if you don’t currently have an ecommerce project going on.

2. Calendar Icons Set

Screen Shot 2017-02-08 at 1.36.55 PM

This icon set features 8 different calendar designs that come as PSDs with organized layers, making it easy to customize dates and colors to reflect the needs of your individual projects.

3. 100 Kitchen Icons

Screen Shot 2017-02-08 at 2.41.09 PM

Perfect for any projects having to do with restaurants or the culinary world. Some of the icons included in this set are ones that you certainly wouldn’t find in a generic or all-purpose collection, including corkscrews, rolling pins, juicers, whisks, and strainers.

4. New York Building Icons Set

Screen Shot 2017-02-08 at 2.50.41 PM

Inspired by the buildings of New York City, most of these simple icons could easily represent buildings or skyscrapers belonging to any urban city. A very professional looking set.

5. Fileicons

Screen Shot 2017-02-08 at 2.58.54 PM

This colorful set of icons that represent various files with different extensions is very useful for any web developer to have on hand. The files come in several different sizes for all of your possible icon needs.

6. One-line Startup Icons

Screen Shot 2017-02-08 at 3.00.12 PM

An icon set inspired by startup (and, dare we say, hipster?) culture. The cool thing about this set (besides the Darth Vader icon), is that they were all drawn using one loopy line, which adds a cool variation to the startup theme.

7. Zen Icons

Screen Shot 2017-02-08 at 3.02.00 PM

With only 12 icons included in this set, the collection isn’t quite as useful or versatile as others on this list. But what it lacks in practicality, it makes up for in beauty. The intricate details are what make these icons unique. Perfect to use in a portfolio site or something similar.

8. Flat Social Icons

Screen Shot 2017-02-08 at 3.06.10 PM

This basic set of flat social media icons is perfect for linking to any social media presence. Colors and shapes are totally customizable.

9. Flat Business Vector Icons

Screen Shot 2017-02-08 at 3.08.06 PM

This set of business-related icons can be used in many different types of projects for professional businesses. As a designer or developer, you can’t go wrong by having these in your personal icon collection.

10. Flat Line Icons

Screen Shot 2017-02-08 at 3.09.59 PM

If you’re looking for a generic, versatile icon set, this is a great option. It includes all the basic icons a developer might need — arrows, play buttons, envelopes, music notes, pencils, etc, all in a simple, modern aesthetic.

Installing a WordPress Plugin

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.

Screen Shot 2016-11-27 at 4.44.01 PM

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).

Screen Shot 2016-11-27 at 4.54.30 PM

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.

 

How to Style a List with Font Awesome Icons

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:

Screen Shot 2016-11-27 at 3.36.33 PM

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:

Screen Shot 2016-11-27 at 3.49.39 PM

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:

Screen Shot 2016-11-27 at 3.56.52 PM

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

li:before{
color: #147efb;
}

Screen Shot 2016-11-27 at 3.58.20 PM

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.

Using Font Awesome to Create Social Icons

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:

Screen Shot 2016-11-27 at 2.46.29 PM

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:

Screen Shot 2016-11-27 at 2.58.52 PM

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.

Screen Shot 2016-11-27 at 3.01.34 PM

Create a Featured Ribbon Effect Using CSS

We’ve all seen those box, rectangle, or square shaped HTML elements that feature a “ribbon” draped around one of its corners to signify that this element is somehow different from the rest. The text in the corner ribbon might read “Featured” or “Limited Time Only” or “On sale!” Whatever the ribbons may say, they usually do a pretty good job of grabbing the users’ attention and letting them know what’s unique about any particular HTML element that the ribbon is applied to.

This Featured Ribbon effect is actually one that can be easily implemented using minimal CSS. The effect is created by the use and manipulation of the span elements and the :before and :after pseudo selectors. To see how it’s done, check out the example below.

The HTML

The HTML in this tutorial couldn’t be more straightforward. We’ve got an image inside of a rectangular div…and that’s pretty much it. The other div, the one with the class .corner-ribbon, makes up the featured ribbon that will appear on the corner of the element.

<div class="container">
 <div class="corner-ribbon">
 <span>Cool!</span>
 </div>
 <h4>Cool Feature</h4>
 <img src="http://lorempixel.com/175/175/" alt="placeholder image" />
</div>

The CSS

The CSS for this effect is a lot more involved than the HTML, but it’s still actually quite simple. By using the :before and :after pseudo-selectors in conjunction with transparent borders, the shape of the featured ribbon is easily created. Absolute positioning and playing with the z-index (you may need to increase the value of the z-index property depending on your project), the ribbon is featured prominently in the top right corner of the element.

@import url(https://fonts.googleapis.com/css?family=Quicksand:400,700);

body{
 font-family: 'Quicksand';
 background-color: #e6e6e6;
}

.container {
 width: 220px;
 height: 300px;
 position: relative;
 border:1px solid #444;
 background: #fff;
 margin: 25px auto;
}

.corner-ribbon {
 position: absolute;
 right: -5px; top: -5px;
 z-index: 1;
 overflow: hidden;
 width: 75px; 
 height: 75px; 
 text-align: right;
}

.corner-ribbon span {
 font-size: 12px;
 color: #fff; 
 text-transform: uppercase; 
 text-align: center;
 font-weight: bold; 
 line-height: 20px;
 transform: rotate(45deg);
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 width: 100px; 
 display: block;
 background: #E37676;
 background: linear-gradient(#E37676, #DB5858);
 box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
 position: absolute;
 top: 19px; right: -21px;
}

.corner-ribbon span::before {
 content: '';
 position: absolute; 
 left: 0px; top: 100%;
 z-index: -1;
 border-left: 3px solid #E37676;
 border-right: 3px solid transparent;
 border-bottom: 3px solid transparent;
 border-top: 3px solid #E37676;
}
.corner-ribbon span::after {
 content: '';
 position: absolute; 
 right: 0%; top: 100%;
 z-index: -1;
 border-right: 3px solid #E37676;
 border-left: 3px solid transparent;
 border-bottom: 3px solid transparent;
 border-top: 3px solid #E37676;
}

.container h4{
 padding: 3px;
 text-align: center;
}

.container img{
 display: block;
 width: 175px;
 margin: 0 auto;
}

After adding all of the above CSS to your stylesheets,  you should end up with a final product that looks something like this:

As always, the colors, content, positioning, etc are meant to be totally customized to reflect your project. Play around with the code and have fun with it!

How to Create a Fixed Header

Fixed headers are an increasingly popular trend for styling headers or navigation menus on your site. When you add a fixed header to a page, that means that the position of the header stays fixed (usually to the top of the page, but it doesn’t necessarily have to be positioned as such) no matter how far the user scrolls down the page. This feature is helpful for anyone who wants to make sure their users always have access to particular links or navigation no matter which part of the page they may be exploring.

If you think that adding a fixed header to any of your projects might be a good idea or, at the very least, a fun experiment, you’re in luck, because it’s actually pretty easy to do. Keep reading and we’ll walk you through the basic steps.

The HTML

For a very, very basic fixed header structure, we used something like this:

<body>

<div class="header">
 <h1 class="header_logo">This is a Fixed Header</h1>
</div>
<div class="offset">
 <p>Scroll down to see the responsive header in action.</p>
</div>

</body>

It’s totally up to you what you want to include in your header. It could be navigation, links, a phone number or other contact info…the choice is completely yours. For the purposes of this demonstration, we just chose to include some text indicating that what you’re looking at is, in fact, a fixed header, and some content below that so we have something to scroll past.

The CSS

We wanted our fixed header to be purple, but the color choice and style of your header is totally up to you. The only line of CSS you absolutely can’t do without if you want the header to be fixed is position: fixed, which in our code is applied to the .header selector. The size, color, positioning, padding, font-family, and pretty much everything else can be tailored to the needs of your project or site.

Check out the CSS below:

body {
 height: 1500px;
 font-family: "Montserrat";
}

.offset {
 margin-top: 0;
 padding-top: 270px;
 text-align: center;
 -webkit-transition: .3s;
 transition: .3s;
}

.header {
 position: fixed;
 width: 100%;
 height: 100px;
 font-weight: bold;
 text-align: center;
 background: #7F6FF0;
 -webkit-transition: .3s;
 transition: .3s;
 color: #fff;
}

.header_logo {
 font-family: 'Oswald', sans-serif;
 margin: 0;
 padding-top: 8px;
 font-size: 30px;
 text-shadow: 3px 4px rgba(0, 0, 0, 0.1);
 -webkit-transition: .3s;
 transition: .3s;
}

If you use the code above, this is how your fixed header should look:

Screen Shot 2016-12-20 at 8.53.55 AM

While you can’t really appreciate the whole fixed header effect from just a screenshot, trust us when we say that when you scroll down this page , you will scroll past the text and end up with the header still stuck to the to of the page. Add the code to any of your projects to see it in action for yourself!