Bootstrap buttons with custom CSS and font-awesome: 2 templates

The Bootstrap buttons and adding effect

In this tutorial, the effects are added in the Bootstrap based buttons by using custom CSS.

Along with this, the font-awesome icons are also added in buttons.

Have a look at code and demos in the following section.

(You may find the reference of font-awesome CSS file after the first demo)

 

A demo of primary buttons with CSS effects

In this demo, the Bootstrap primary buttons of different sizes are created with the font-awesome icon. The button caption is used “Download” so accordingly, the download icon from the font-awesome is used. Have a look at the code and live demo online:

Bootstrap button download

See online demo and code

Following is the CSS used for creating the buttons hover effect:

 

For using the font-awesome icons in button, you have to include the CSS file:

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

In the CSS part, font-family is specified as fontawesome (See the .btn-effets:after class). For including the icon of font-awesome, you may use the icon content code. For example, for the download icon, the code is:

content: “\f019”;

Find the appropriate icon as per button usage.

The markup used in the demo is:

 

A demo of upload buttons with different effect

In this example, the success button class of Bootstrap i.e. green buttons is used for creating the upload button with the icon from the font-awesome library.

Bootstrap button upload

See online demo and code

Following is the CSS used for button effect on hover state:

 

You may get the complete code from the demo page.