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.
You May Also Like:
- Responsive Infographic Cards
- HTML CSS Pagination Design
- CSS Link Hover Effects
- Sliding Navigation Buttons
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!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.
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 74 75 76 77 78 79 |
/** 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.
Nice one …..!!!
Thanks, Stay connected.
Nice bro… Keep it up… You are great
Great work bro !!
thanks
nice broo
thank you
super bro…..
nice work….
thanks shaan, its great and helpful..
Thank you, Stay connected.