Home Web Design CSS CSS Ghost Buttons With Icon | Hover and Focus Effect

CSS Ghost Buttons With Icon | Hover and Focus Effect

August 9, 2019

9522

How we can create ghost buttons using HTML and CSS? Solution: CSS Ghost Buttons With Icon reveal on Hover and also with Focus Effect.

Basically, “Ghost Button” is a simple button with border and transparent background color. Nowadays we use this on multiple places on the webpage, because of its looks minimal and pretty good. This post is for showing an example of customized ghost buttons.

Today you will learn to create Buttons with hover and focus effect. On a desktop, you can mouse over on the button to see hover effects, and focus on the buttons by pressing tab to see focus effect also. I am not sure on mobile, But I think if you press and hold on a button then you can see the hover effect.

So, Today I am sharing CSS Ghost Buttons With Icon. Basically, there are 4 simple buttons, but when you hover on it, then an icon and color appear over the buttons. In this design, there have 4 different kinds of buttons to show different logs like warning, error, success, etc. The available icons are matching with the massages, that creates it useful.

If you are thinking now how these buttons with icons actually are, then see the preview given below.

Preview Of Buttons Hover and Focus Effect

See this video preview to getting an idea of how buttons are looks like.

https://webdevtrick.com/wp-content/uploads/ghost-buttons-with-icons.mp4?_=1

Live Demo

Now you can see this visually, Also you see live by pressing the live view button given above. If you like this, then get the source code of its.

CSS Ghost Buttons With Icon Source Code

Before sharing source code, let’s talk about it. First, I have created simple buttons using <button> tag, after that I have placed a icon and span for text inside it. Now the whole tree looks like this: <button class="btn info"><i class="icon-class"></i><span>Text</span></button> .

I have placed four different icons in each buttons using Font-Awesome icons library. As you can see in the preview there are four buttons with different icons and texts. For icon reveal, first, I have placed icons with margin-left: -100%; value and on hover its value becomes 0. On mouse hover we are doing two works first, remove the margin value of icon and fill background color.

After that, I have put a transition for creating the animation effects, the transition value is transition: all 300ms ease-in-out; There is a focus effect you can see in the preview, you can see by pressing the tab button. For creating that, I have simply used .btn:focus { value } property.

All left things you will understand easily after getting the codes, I can’t explain all in writing. For creating these you have to create only 2 files. One for HTML and one for CSS. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given here below.

<!DOCTYPE html>
<!--Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Ghost Button With Icon | Webdevtrick.com</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css'>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<div>
  <button class="btn info"><i class="fas fa-exclamation-circle"></i><span>info</span></button>
  <button class="btn success"><i class="fas fa-check-circle"></i><span>success</span></button>
  <button class="btn warning"><i class="fas fa-exclamation-triangle"></i><span>warning</span></button>
  <button class="btn danger"><i class="fas fa-times-circle"></i><span>danger</span></button>
</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Ghost Button With Icon | Webdevtrick.com</title>

</head>

<body>

<div>

<button class="btn success"><i class="fas fa-check-circle"></i><span>success</span></button>

<button class="btn warning"><i class="fas fa-exclamation-triangle"></i><span>warning</span></button>

<button class="btn danger"><i class="fas fa-times-circle"></i><span>danger</span></button>

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/** Code By Webdevtrick ( https://webdevtrick.com ) **/
body {
  padding-top: 15%;
  margin: 0 auto;
  text-align: center;
  background: #ececec;
}
.btn {
  font-weight: bold;
  font-size: 2rem;
  background-color: transparent;
  border: solid 3px;
  padding: 30px;
  margin: 10px 10px;
  display: inline-flex;
  overflow: hidden;
  cursor: pointer;
  transition: all 300ms ease-in-out;
}
.btn i, .btn span {
  width: 100%;
  display: block;
  padding: 0.7rem;
  margin: 0;
  box-sizing: border-box;
  flex-shrink: 0;
  text-transform: uppercase;
}
.btn i {
  margin-left: -100%;
  transition: margin-left 300ms ease-in-out;
}
.btn:hover i {
  margin-left: 0;
}
.btn.info {
  color: #1489ff;
  border-color: #1489ff;
}
.btn.info:hover {
  color: #ffffff;
  background-color: #1489ff;
}
.btn.info:focus {
  box-shadow: 0 0 0 0.3rem rgba(20, 137, 255, 0.7);
}
.btn.success {
  color: #00ce0d;
  border-color: #00ce0d;
}
.btn.success:hover {
  color: #ffffff;
  background-color: #00ce0d;
}
.btn.success:focus {
  box-shadow: 0 0 0 0.3rem rgba(0, 206, 13, 0.7);
}
.btn.warning {
  color:  #fd9d08;
  border-color:  #fd9d08;
}
.btn.warning:hover {
  color: #ffffff;
  background-color:#fd9d08;
}
.btn.warning:focus {
  box-shadow: 0 0 0 0.3rem rgba(241, 218, 25, 0.7);
}
.btn.danger {
  color: #ff2323;
  border-color: #ff2323;
}
.btn.danger:hover {
  color: #ffffff;
  background-color: #ff2323;
}
.btn.danger:focus {
  box-shadow: 0 0 0 0.3rem rgba(255, 35, 35, 0.7);
}

/** Code By Webdevtrick ( https://webdevtrick.com ) **/

body {

padding-top: 15%;

margin: 0 auto;

text-align: center;

background: #ececec;

}

.btn {

font-weight: bold;

font-size: 2rem;

background-color: transparent;

border: solid 3px;

padding: 30px;

margin: 10px 10px;

display: inline-flex;

overflow: hidden;

cursor: pointer;

transition: all 300ms ease-in-out;

}

.btn i, .btn span {

width: 100%;

display: block;

padding: 0.7rem;

margin: 0;

box-sizing: border-box;

flex-shrink: 0;

text-transform: uppercase;

}

.btn i {

margin-left: -100%;

transition: margin-left 300ms ease-in-out;

}

.btn:hover i {

margin-left: 0;

}

.btn.info {

color: #1489ff;

border-color: #1489ff;

}

.btn.info:hover {

color: #ffffff;

background-color: #1489ff;

}

.btn.info:focus {

box-shadow: 0 0 0 0.3rem rgba(20, 137, 255, 0.7);

}

.btn.success {

color: #00ce0d;

border-color: #00ce0d;

}

.btn.success:hover {

color: #ffffff;

background-color: #00ce0d;

}

.btn.success:focus {

box-shadow: 0 0 0 0.3rem rgba(0, 206, 13, 0.7);

}

.btn.warning {

color: #fd9d08;

border-color: #fd9d08;

}

.btn.warning:hover {

color: #ffffff;

background-color:#fd9d08;

}

.btn.warning:focus {

box-shadow: 0 0 0 0.3rem rgba(241, 218, 25, 0.7);

}

.btn.danger {

color: #ff2323;

border-color: #ff2323;

}

.btn.danger:hover {

color: #ffffff;

background-color: #ff2323;

}

.btn.danger:focus {

box-shadow: 0 0 0 0.3rem rgba(255, 35, 35, 0.7);

}

That’s It. Now you have successfully created CSS Ghost Buttons With Icon on Hover and also with Focus Effect. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.