Button Icon Hover Reveal With CSS / SCSS
With all the components in the HTML web page, you should also consider placing icons on your web page. Normally icons are placed on a page form, but icons can appear anywhere on each website section such as articles, news, headings, or footer.
Placement of icons can be anywhere and inside the form, the button is one of the normally and often seen on the websites.
We can use available icons that we can find on the internet and some of them are Font Awesome, Open Iconic, Material Design Icons, and Ionic Icons.
To use icons on the website page, you can download various asset icons and paste them on the pages of our website, or use the online icons link to use them.
There are the sample links for linking the icons on an HTML of a web page :
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”><link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.min.css”><link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/2.7.94/css/materialdesignicons.min.css”><link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.4.1/css/ionicons.min.css”>I will use Bootstrap 4 as our CSS basic framework for this project. Bootstrap framework was widely used by millions of websites because it is easy to use and easy to understand with all the frontend development libraries luxury. So I will include the Bootstrap 4 libraries from the CDN.
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css”>The following is an example of a website page that uses the combined icons mentioned above with the compiled CSS animation effect to display hidden icons on the button. The compiled CSS was from the SCSS file that we used for extending the Bootstrap 4 libraries.
First of all, I am going to make a default bootstrap button that had an icon and text span inside it.
Every icon has its own unique class attribute with a prefix to display its own content. Font Awesome 5 uses `fa`, `fas`, `far` and `fab` with a prefix, Open Iconic use `oi` and prefix, Material Design Icons use `mdi` and prefix and Ionicons use `icon` and prefix `ion`.
<!-- Font Awesome -->
<button role="button" class="btn btn-outline-primary btn-lg">
<i class="fa fa-chevron-left"></i> <span class="spn">Submit</span></button><button role="button" class="btn btn-outline-warning btn-lg">
<i class="fa fa-arrow-left"></i> <span class="spn">Submit</span></button><button role="button" class="btn btn-outline-danger btn-lg">
<i class="fa fa-heart"></i> <span class="spn">Submit</span></button><button role="button" class="btn btn-outline-info btn-lg">
<i class="fa fa-long-arrow-left"></i> <span class="spn">Submit</span>
</button><button role="button" class="btn btn-outline-success btn-lg">
<i class="fa fa-arrow-circle-left"></i> <span class="spn">Submit</span>
</button><button role="button" class="btn btn-outline-secondary btn-lg">
<i class="fa fa-pencil"></i> <span class="spn">Submit</span></button><!-- Open Iconic -->
<button role="button" class="btn btn-outline-primary btn-lg">
<i class="oi oi-bolt"></i> <span class="spn">Submit</span>
</button><button role="button" class="btn btn-outline-warning btn-lg">
<i class="oi oi-droplet"></i> <span class="spn">Submit</span></button><button role="button" class="btn btn-outline-danger btn-lg">
<i class="oi oi-key"></i> <span class="spn">Submit</span
</button><button role="button" class="btn btn-outline-info btn-lg">
<i class="oi oi-check"></i> <span class="spn">Submit</span></button><button role="button" class="btn btn-outline-success btn-lg">
<i class="oi oi-arrow-circle-left"></i> <span class="spn">Submit</span>
</button><button role="button" class="btn btn-outline-secondary btn-lg">
<i class="oi oi-arrow-left"></i> <span class="spn">Submit</span
</button><!-- Material Design Icons -->
<button role="button" class="btn btn-outline-primary btn-lg">
<i class="mdi mdi-codepen"></i> <span class="spn">Submit</span></button><button role="button" class="btn btn-outline-warning btn-lg">
<i class="mdi mdi-silverware"></i> <span class="spn">Submit</span>
</button><button role="button" class="btn btn-outline-danger btn-lg">
<i class="mdi mdi-coffee"></i> <span class="spn">Submit</span></button><button role="button" class="btn btn-outline-info btn-lg">
<i class="mdi mdi-plus-outline"></i> <span class="spn">Submit</span>
</button><button role="button" class="btn btn-outline-success btn-lg">
<i class="mdi mdi-arrow-left"></i> <span class="spn">Submit</span>
</button><button role="button" class="btn btn-outline-secondary btn-lg">
<i class="mdi mdi-skull"></i> <span class="spn">Submit</span></button><!-- Ionicons -->
<button role="button" class="btn btn-outline-primary btn-lg">
<i class="icon ion-md-checkmark"></i> <span class="spn">Submit</span>
</button><button role="button" class="btn btn-outline-warning btn-lg">
<i class="icon ion-md-send"></i> <span class="spn">Submit</span
</button><button role="button" class="btn btn-outline-danger btn-lg">
<i class="icon ion-logo-codepen"></i> <span class="spn">Submit</span>
</button><button role="button" class="btn btn-outline-info btn-lg">
<i class="icon ion-md-pizza"></i> <span class="spn">Submit</span></button><button role="button" class="btn btn-outline-success btn-lg">
<i class="icon ion-md-exit"></i> <span class="spn">Submit</span></button><button role="button" class="btn btn-outline-secondary btn-lg">
<i class="icon ion-md-contract"></i> <span class="spn">Submit</span>
</button>
After that, I am going to add the default CSS property to hide the icons only and CSS properties in the text span for an adjustment of the buttons. The result would be like the image below.
<!-- Rounded Button | Font Awesome -->
<button role="button" class="btn btn-outline-primary btn-lg btn-iconed btn-rounded">
<i class="fa fa-chevron-left"></i> <span class="spn">Submit</span></button><button role="button" class="btn btn-outline-warning btn-lg btn-iconed btn-rounded">
<i class="fa fa-arrow-left"></i> <span class="spn">Submit</span></button><button role="button" class="btn btn-outline-danger btn-lg btn-iconed btn-rounded">
<i class="fa fa-heart"></i> <span class="spn">Submit</span></button><button role="button" class="btn btn-outline-info btn-lg btn-iconed btn-rounded">
<i class="fa fa-long-arrow-left"></i> <span class="spn">Submit</span>
</button><button role="button" class="btn btn-outline-success btn-lg btn-iconed btn-rounded">
<i class="fa fa-arrow-circle-left"></i> <span class="spn">Submit</span>
</button><button role="button" class="btn btn-outline-secondary btn-lg btn-iconed btn-rounded">
<i class="fa fa-pencil"></i> <span class="spn">Submit</span></button><!-- Flatted Button | Open Iconic -->
<button role="button" class="btn btn-outline-primary btn-lg btn-iconed btn-flat">
<i class="oi oi-bolt"></i> <span class="spn">Submit</span>
</button><button role="button" class="btn btn-outline-warning btn-lg btn-iconed btn-flat">
<i class="oi oi-droplet"></i> <span class="spn">Submit</span></button><button role="button" class="btn btn-outline-danger btn-lg btn-iconed btn-flat">
<i class="oi oi-key"></i> <span class="spn">Submit</span
</button><button role="button" class="btn btn-outline-info btn-lg btn-iconed btn-flat">
<i class="oi oi-check"></i> <span class="spn">Submit</span></button><button role="button" class="btn btn-outline-success btn-lg btn-iconed btn-flat">
<i class="oi oi-arrow-circle-left"></i> <span class="spn">Submit</span>
</button><button role="button" class="btn btn-outline-secondary btn-lg btn-iconed btn-flat">
<i class="oi oi-arrow-left"></i> <span class="spn">Submit</span
</button><!-- Standard Button | Material Design Icons -->
<button role="button" class="btn btn-outline-primary btn-lg btn-iconed">
<i class="mdi mdi-codepen"></i> <span class="spn">Submit</span></button><button role="button" class="btn btn-outline-warning btn-lg btn-iconed">
<i class="mdi mdi-silverware"></i> <span class="spn">Submit</span>
</button><button role="button" class="btn btn-outline-danger btn-lg btn-iconed">
<i class="mdi mdi-coffee"></i> <span class="spn">Submit</span></button><button role="button" class="btn btn-outline-info btn-lg btn-iconed">
<i class="mdi mdi-plus-outline"></i> <span class="spn">Submit</span>
</button><button role="button" class="btn btn-outline-success btn-lg btn-iconed">
<i class="mdi mdi-arrow-left"></i> <span class="spn">Submit</span>
</button><button role="button" class="btn btn-outline-secondary btn-lg btn-iconed">
<i class="mdi mdi-skull"></i> <span class="spn">Submit</span></button><!-- Rounded Button | Ionicons -->
<button role="button" class="btn btn-outline-primary btn-lg btn-iconed btn-rounded">
<i class="icon ion-md-checkmark"></i> <span class="spn">Submit</span>
</button><button role="button" class="btn btn-outline-warning btn-lg btn-iconed btn-rounded">
<i class="icon ion-md-send"></i> <span class="spn">Submit</span
</button><button role="button" class="btn btn-outline-danger btn-lg btn-iconed btn-rounded">
<i class="icon ion-logo-codepen"></i> <span class="spn">Submit</span>
</button><button role="button" class="btn btn-outline-info btn-lg btn-iconed btn-rounded">
<i class="icon ion-md-pizza"></i> <span class="spn">Submit</span></button><button role="button" class="btn btn-outline-success btn-lg btn-iconed btn-rounded">
<i class="icon ion-md-exit"></i> <span class="spn">Submit</span></button><button role="button" class="btn btn-outline-secondary btn-lg btn-iconed btn-rounded">
<i class="icon ion-md-contract"></i> <span class="spn">Submit</span>
</button>
Note that the button default property was extended from bootstrap default buttons. New CSS file included in the new separated on style.css at the bottom so we still could have a bootstrap on top of our HTML web page.
<link rel="stylesheet" href="css/style.css">The most important thing for this project was the CSS transform and the position property. The idea was to display the already hidden icons which were set by default on the CSS, revealing the hidden icons back when we hovered the buttons. Now we can modify the button and the text span with classes that have new properties:
/** Flatted button %placeholder **/
.btn-iconed.btn-flat {
border-radius: 0rem;
/* margin-right: 2rem; Icon sample spacing */
}/** Rounded button **/
.btn-rounded {
border-radius: 5rem;
/* margin-right: 2rem; Icon sample spacing */
}/** Button Iconed **/
.btn-iconed {
transition: .15s ease-in-out;
padding-left: 1.3rem;
padding-right: 1.5rem;
/** Flatted button **/
}/** Icons Classes **/
/** -- Open Iconic and Font Awesome -- **/
.btn-iconed [class~=oi], .btn-iconed [class~=fa],
/** -- Since Material and Iconic used ::before -- **/
.btn-iconed [class~=mdi]::before,
.btn-iconed [class~=icon]::before {
opacity: 0;
-webkit-transform-origin: left right;
transform-origin: left right;
-webkit-transform: translateX(-10px) scale(1.25);
transform: translateX(-10px) scale(1.25);
transition: .15s ease-out;
}/** Span Class **/
.btn-iconed [class=spn] {
position: relative;
left: -9px;
-webkit-transform-origin: left right;
transform-origin: left right;
-webkit-transform: translateX(-9px);
transform: translateX(-9px);
transition: .20s ease-in-out;
}/** -- Icons on Hover properties -- **/
.btn-iconed:hover [class~=oi], .btn-iconed:hover [class~=fa],
.btn-iconed:hover [class~=mdi]::before, .btn-iconed:hover [class~=icon]::before {
opacity: 1;
-webkit-transform: translateX(0px) scale(0.75);
transform: translateX(0px) scale(0.75);
}/** -- Span on Hover properties -- **/
.btn-iconed:hover [class=spn] {
left: 0px;
}/** style.css -- compiled **/
/** Flatted button %placeholder **/
%btn-flat {
border-radius: 0rem;
/* margin-right: 2rem; Icon sample spacing */
}
/** Rounded button **/
.btn-rounded {
border-radius: 5rem;
/* margin-right: 2rem; Icon sample spacing */
}
/** Button Iconed **/
.btn {
&-iconed {
transition: .15s ease-in-out;
padding-left: 1.3rem;
padding-right: 1.5rem;
/** Icons Classes **/
/** -- Open Iconic and Font Awesome -- **/
[class~=oi], [class~=fa],
/** -- Since Material and Iconic used ::before -- **/
[class~=mdi]::before,
[class~=icon]::before {
opacity: 0;
transform-origin: left right;
transform: translateX(-10px) scale(1.25);
transition: .15s ease-out;
}
/** Span Class **/
[class=spn] {
position: relative;
left:-9px;
transform-origin: left right;
transform: translateX(-9px);
transition: .20s ease-in-out;
}
/** -- Icons on Hover properties -- **/
&:hover {
[class~=oi], [class~=fa],
/* -- Since Material and Iconic used ::before -- */
[class~=mdi]::before, [class~=icon]::before {
opacity: 1;
transform: translateX(0px) scale(.75);
}
/** -- Span on Hover properties -- **/
[class=spn] {
// transform: translateX(0);
left:0px;
}
// padding-left: 2rem;
}
/** Flatted button **/
&.btn-flat {
@extend %btn-flat;
}
}
}/** style.scss -- source **/
Move along to the browser, now when we hover the buttons, icons will be revealed from left to right with text span move along with the icon animation. The result will be like the image below:
This is the full HTML page for the buttons:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap 4 SASS - Button Icon Hover Reveal</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/2.7.94/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.4.1/css/ionicons.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container py-5">
<!-- Rounded Button | Font Awesome -->
<h1 class="font-weight-light">Font Awesome</h1>
<div class="my-4 row">
<div class="text-center col-md-2">
<!-- button classes -->
<button class="btn btn-iconed btn-lg btn-rounded btn-outline-primary"role="button">
<i class="fa fa-chevron-left"></i> <span class="spn">Submit</span>
</button>
<div class="my-3 text-primary">
<i class="fa-2x fa fa-chevron-left"></i>
</div>
</div>
<div class="text-center col-md-2">
<!-- button classes -->
<button class="btn btn-iconed btn-lg btn-rounded btn-outline-warning"role="button">
<i class="fa fa-arrow-left"></i> <span class="spn">Submit</span>
</button>
<div class="my-3 text-warning">
<i class="fa-2x fa fa-arrow-left"></i>
</div>
</div>
<div class="text-center col-md-2">
<!-- button classes -->
<button class="btn btn-iconed btn-lg btn-rounded btn-outline-danger"role="button">
<i class="fa fa-heart"></i> <span class="spn">Submit</span>
</button>
<div class="my-3 text-danger">
<i class="fa-2x fa fa-heart"></i>
</div>
</div>
<div class="text-center col-md-2">
<!-- button classes -->
<button class="btn btn-iconed btn-lg btn-rounded btn-outline-info"role="button">
<i class="fa fa-long-arrow-left"></i> <span class="spn">Submit</span>
</button>
<div class="my-3 text-info">
<i class="fa-2x fa fa-long-arrow-left"></i>
</div>
</div>
<div class="text-center col-md-2">
<!-- button classes -->
<button class="btn btn-iconed btn-lg btn-rounded btn-outline-success"role="button">
<i class="fa fa-arrow-circle-left"></i> <span class="spn">Submit</span>
</button>
<div class="my-3 text-success">
<i class="fa-2x fa fa-arrow-circle-left"></i>
</div>
</div>
<div class="text-center col-md-2">
<!-- button classes -->
<button class="btn btn-iconed btn-lg btn-rounded btn-outline-secondary"role="button">
<i class="fa fa-pencil"></i> <span class="spn">Submit</span>
</button>
<div class="my-3 text-secondary">
<i class="fa-2x fa fa-pencil"></i>
</div>
</div>
</div><!-- Flatted Button | Open Iconic -->
<h1 class="font-weight-light">Open Iconic</h1>
<div class="my-4 row">
<div class="text-center col-md-2">
<!-- button classes -->
<button class="btn btn-iconed btn-lg btn-flat btn-outline-primary"role="button">
<i class="oi oi-bolt"></i> <span class="spn">Submit</span>
</button>
<div class="my-3 text-primary">
<i class="fa-2x oi oi-bolt"></i>
</div>
</div>
<div class="text-center col-md-2">
<!-- button classes -->
<button class="btn btn-iconed btn-lg btn-flat btn-outline-warning"role="button">
<i class="oi oi-droplet"></i> <span class="spn">Submit</span>
</button>
<div class="my-3 text-warning">
<i class="fa-2x oi oi-droplet"></i>
</div>
</div>
<div class="text-center col-md-2">
<!-- button classes -->
<button class="btn btn-iconed btn-lg btn-flat btn-outline-danger"role="button">
<i class="oi oi-key"></i> <span class="spn">Submit</span>
</button>
<div class="my-3 text-danger">
<i class="fa-2x oi oi-key"></i>
</div>
</div>
<div class="text-center col-md-2">
<!-- button classes -->
<button class="btn btn-iconed btn-lg btn-flat btn-outline-info"role="button">
<i class="oi oi-check"></i> <span class="spn">Submit</span>
</button>
<div class="my-3 text-info">
<i class="fa-2x oi oi-check"></i>
</div>
</div>
<div class="text-center col-md-2">
<!-- button classes -->
<button class="btn btn-iconed btn-lg btn-flat btn-outline-success"role="button">
<i class="oi oi-arrow-circle-left"></i> <span class="spn">Submit</span>
</button>
<div class="my-3 text-success">
<i class="fa-2x oi oi-arrow-circle-left"></i>
</div>
</div>
<div class="text-center col-md-2">
<!-- button classes -->
<button class="btn btn-iconed btn-lg btn-flat btn-outline-secondary"role="button">
<i class="oi oi-arrow-left"></i> <span class="spn">Submit</span>
</button>
<div class="my-3 text-secondary">
<i class="fa-2x oi oi-arrow-left"></i>
</div>
</div>
</div>
<!-- Standard Button | Material Design Icons -->
<h1 class="font-weight-light">Material Design Icons</h1>
<div class="my-4 row">
<div class="text-center col-md-2">
<!-- button classes -->
<button class="btn btn-iconed btn-lg btn-outline-primary"role="button">
<i class="mdi mdi-codepen"></i> <span class="spn">Submit</span>
</button>
<div class="my-3 text-primary">
<i class="fa-2x mdi mdi-codepen"></i>
</div>
</div>
<div class="text-center col-md-2">
<!-- button classes -->
<button class="btn btn-iconed btn-lg btn-outline-warning"role="button">
<i class="mdi mdi-silverware"></i> <span class="spn">Submit</span>
</button>
<div class="my-3 text-warning">
<i class="fa-2x mdi mdi-silverware"></i>
</div>
</div>
<div class="text-center col-md-2">
<!-- button classes -->
<button class="btn btn-iconed btn-lg btn-outline-danger"role="button">
<i class="mdi mdi-coffee"></i> <span class="spn">Submit</span>
</button>
<div class="my-3 text-danger">
<i class="fa-2x mdi mdi-coffee"></i>
</div>
</div>
<div class="text-center col-md-2">
<!-- button classes -->
<button class="btn btn-iconed btn-lg btn-outline-info"role="button">
<i class="mdi mdi-plus-outline"></i> <span class="spn">Submit</span>
</button>
<div class="my-3 text-info">
<i class="fa-2x mdi mdi-plus-outline"></i>
</div>
</div>
<div class="text-center col-md-2">
<!-- button classes -->
<button class="btn btn-iconed btn-lg btn-outline-success"role="button">
<i class="mdi mdi-arrow-left"></i> <span class="spn">Submit</span>
</button>
<div class="my-3 text-success">
<i class="fa-2x mdi mdi-arrow-left"></i>
</div>
</div>
<div class="text-center col-md-2">
<!-- button classes -->
<button class="btn btn-iconed btn-lg btn-outline-secondary"role="button">
<i class="mdi mdi-skull"></i> <span class="spn">Submit</span>
</button>
<div class="my-3 text-secondary">
<i class="fa-2x mdi mdi-skull"></i>
</div>
</div>
</div><!-- Rounded Button | Ionicons -->
<h1 class="font-weight-light">Ionicons</h1>
<div class="my-4 row">
<div class="text-center col-md-2">
<!-- button classes -->
<button class="btn btn-iconed btn-lg btn-rounded btn-outline-primary"role="button">
<i class="icon ion-md-checkmark"></i> <span class="spn">Submit</span>
</button>
<div class="my-3 text-primary">
<i class="fa-2x icon ion-md-checkmark"></i>
</div>
</div>
<div class="text-center col-md-2">
<!-- button classes -->
<button class="btn btn-iconed btn-lg btn-rounded btn-outline-warning"role="button">
<i class="icon ion-md-send"></i> <span class="spn">Submit</span>
</button>
<div class="my-3 text-warning">
<i class="fa-2x icon ion-md-send"></i>
</div>
</div>
<div class="text-center col-md-2">
<!-- button classes -->
<button class="btn btn-iconed btn-lg btn-rounded btn-outline-danger"role="button">
<i class="icon ion-logo-codepen"></i> <span class="spn">Submit</span>
</button>
<div class="my-3 text-danger">
<i class="fa-2x icon ion-logo-codepen"></i>
</div>
</div>
<div class="text-center col-md-2">
<!-- button classes -->
<button class="btn btn-iconed btn-lg btn-rounded btn-outline-info"role="button">
<i class="icon ion-md-pizza"></i> <span class="spn">Submit</span>
</button>
<div class="my-3 text-info">
<i class="fa-2x icon ion-md-pizza"></i>
</div>
</div>
<div class="text-center col-md-2">
<!-- button classes -->
<button class="btn btn-iconed btn-lg btn-rounded btn-outline-success"role="button">
<i class="icon ion-md-exit"></i> <span class="spn">Submit</span>
</button>
<div class="my-3 text-success">
<i class="fa-2x icon ion-md-exit"></i>
</div>
</div>
<div class="text-center col-md-2">
<!-- button classes -->
<button class="btn btn-iconed btn-lg btn-rounded btn-outline-secondary"role="button">
<i class="icon ion-md-contract"></i> <span class="spn">Submit</span>
</button>
<div class="my-3 text-secondary">
<i class="fa-2x icon ion-md-contract"></i>
</div>
</div>
</div></div><!-- jquery.min.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script></body>
</html>
The demos on codepen.io :
Read also:
The source code on this story is on GitHub.
If you already used SCSS for your development, it’s a very good thing that this kind of project would be the asset libraries that you can use over and over again for your further project development. You could use one of the icons or you can use all the icons for a project. Cheers, happy icon coding!
