Bootstrap buttons with custom CSS and font-awesome: 2 templates
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)
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:
See online demo and code
Following is the CSS used for creating the buttons hover effect:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<style> .btn-effets{ border-radius: 0; position: relative; color: #fff; border:1px solid transparent; text-transform: uppercase; transition: all 0.40s ease 0s; } .btn-effets:after{ content: "\f019"; font-family: fontawesome; position: absolute; right: 6px; top: -4px; opacity: 0; color: #fff; transition: all 0.40s ease 0s; } .btn-effets:hover:after{ top:40%; opacity: 5; } .btn-effets span{ display: block; transition: all 0.70s linear 0s; } .btn-effets:hover span{ transform: translate(-9px); } </style> |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<div class="container"> <div class="row"> <div class="col-md-3"> <a href="#" class="btn btn-effets btn-primary "><span>Download</span></a> </div> <div class="col-md-6"> <a href="#" class="btn btn-effets btn-primary btn-block"><span>Download</span></a> </div> <div class="col-md-3"> <a href="#" class="btn btn-effets btn-primary btn-lg"><span>Download</span></a> </div> </div> </div> |
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.
See online demo and code
Following is the CSS used for button effect on hover state:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
<style> .btn-effets{ border-radius: 10px; position: relative; color: #FFFFA6; font-weight:700; transition: all 0.40s ease 0s; } .btn-effets:after{ content: "\f093"; font-family: fontawesome; position: absolute; right: 3px; top: -2px; opacity: 0; color: #fff; transition: all 0.40s ease-out 0s; } .btn-effets:hover:after{ top:2%; opacity: 5; } .btn-effets span{ display: block; transition: all 0.70s linear 0s; } .btn-effets:hover span{ transform: translate(-9px); color: #fff; background: transparent; } .btn.blue:hover{ } </style> |
You may get the complete code from the demo page.