How to Create CSS Ghost Buttons with Icon on Hover

How to Create CSS Ghost Buttons with Icon on Hover

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.

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.

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>

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);
}

That’s It. Now you have successfully created CSS Ghost Buttons With Icon on Hover and also with Focus Effect.

Thanks for reading. If you liked this post, share it with all of your programming buddies!

css html javascript web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire CSS Developer

Want to develop a website or re-design using CSS Development? We build a website and we implemented CSS successfully if you are planning to **[Hire CSS Developer](https://hourlydeveloper.io/hire-dedicated-css-developer/ "Hire CSS Developer")**...

Hire Web Developer

Looking for an attractive & user-friendly web developer? HourlyDeveloper.io, a leading web, and mobile app development company, offers web developers for hire through flexible engagement models. You can **[Hire Web...

Top Neumorphism UI Design Using HTML, CSS & JavaScript

Top Neumorphism UI Design Using Html CSS & Javascript - Neumorphism Effect. Neumorphism Element Using HTML, CSS & JavaScript

The Ultimate Guide to Web Development with HTML and CSS

The Ultimate Guide to Web Development with HTML and CSS. Learn Web Development by creating a Blog with HTML and CSS. Make a web applications using HTML5 and CSS3. Create a blog from Scratch.

Build PACMAN in Vanilla JavaScript, HTML and CSS

Vanilla JavaScript Game with HTML and CSS. A super simple walkthourgh to coding Pac-Man in vanilla JavaScript, HTML and CSS. Learn how to make Pac-Man move around the grid while avoiding walls, show you how to use the constructor method for all four ghosts to apply their unique characteristics to each one, including at what speed they move at. Clyde obviously being the slowest.