DEV Community

Cover image for How to create a button with hover effect using HTML and CSS
Subhransu Patra
Subhransu Patra

Posted on

How to create a button with hover effect using HTML and CSS

#html #css #frontenddeveloper 
<p>Hello</p>
Enter fullscreen mode Exit fullscreen mode

My Website, Inform Our World

Buttons are a way too much necessary for building a website. From making a hamburger navbar to create a dark mode. But default button of HTML seems to be ugly.

Ugly Button

but only with HTML and CSS we can make an amazing button with hover effect.

Create a class name for button. Such as

<button class="btn"></button>
Enter fullscreen mode Exit fullscreen mode

Then under the style,

<style> .btn { /* Here we will be placing the style components */ } </style>
Enter fullscreen mode Exit fullscreen mode

Or simply you can write beside the TagName,

<button style="/* Here we will be placing the style components */">Ugly Button</button>
Enter fullscreen mode Exit fullscreen mode

I am using the second option, choose whatever you want. It's upto you.

First we will have to set a background of the HTML file.

<style> body { margin: 0; background: linear-gradient(to left, rgb(0,0,122), rgb(0,233,210)) } </style>
Enter fullscreen mode Exit fullscreen mode

Then add some padding

<button style="padding: 10px;">Ugly Button</button>
Enter fullscreen mode Exit fullscreen mode

Then change the color of the button

<button style="padding: 10px;background: rgba(0,0,0,0.2);">In process of beautiful button</button>
Enter fullscreen mode Exit fullscreen mode

Edit the border

<button style="padding: 10px;background: rgba(0,0,0,0.2);border: 2px solid rgba(0,0,0,0.4)">In process of beautiful button</button>
Enter fullscreen mode Exit fullscreen mode

Border Radius

<button style="padding: 10px;background: rgba(0,0,0,0.2);border: 2px solid rgba(0,0,0,0.4);border-radius: 60vw;">In process of beautiful button</button>
Enter fullscreen mode Exit fullscreen mode

Let's change the font

<button style="padding: 10px;background: rgba(0,0,0,0.2);border: 2px solid rgba(0,0,0,0.4);border-radius: 60vw;backdrop-filter: blur(5px);color:cornsilk;font-family: Bahnschrift;">In process of beautiful button</button>
Enter fullscreen mode Exit fullscreen mode

Now, we will have to create a class name (if you haven't) to create a hover effect

<style> body { margin: 0; background: linear-gradient(to left, rgb(0,0,122), rgb(0,233,210)) } .btn:hover { /* Here we will be placing the style components */ } </style> </head> <body> <button class="btn" style="padding: 10px;background: rgba(0,0,0,0.2);border: 2px solid rgba(0,0,0,0.4);border-radius: 60vw;backdrop-filter: blur(5px);color:cornsilk;font-family: Bahnschrift;">In process of beautiful button</button> </body>
Enter fullscreen mode Exit fullscreen mode

Then create a hover effect...

<style> body { margin: 0; background: linear-gradient(to left, rgb(0,0,122), rgb(0,233,210)) } .btn:hover { box-shadow: -2px 2px 50px blue; } </style> </head> <body> <button class="btn" style="padding: 10px;background: rgba(0,0,0,0.2);border: 2px solid rgba(0,0,0,0.4);border-radius: 60vw;backdrop-filter: blur(5px);color:cornsilk;font-family: Bahnschrift;">In process of beautiful button</button> </body>
Enter fullscreen mode Exit fullscreen mode

Create a transition effect

<style> body { margin: 0; background: linear-gradient(to left, rgb(0,0,122), rgb(0,233,210)) } .btn:hover { box-shadow: -2px 2px 50px blue;transition: 1s; } </style> </head> <body> <button class="btn" style="padding: 10px;background: rgba(0,0,0,0.2);border: 2px solid rgba(0,0,0,0.4);border-radius: 60vw;backdrop-filter: blur(5px);color:cornsilk;font-family: Bahnschrift;transition: 1s;">Beautiful Button</button> </body>
Enter fullscreen mode Exit fullscreen mode

And yeah! your beautiful button is ready 🙃

Beautiful Button

Full Code

<!DOCTYPE html> <html lang="en"> <head> <title>Beautiful Button</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin: 0; background: linear-gradient(to left, rgb(0,0,122), rgb(0,233,210)) } .btn:hover { box-shadow: -2px 2px 50px blue;transition: 1s; } </style> </head> <body> <button class="btn" style="padding: 10px;background: rgba(0,0,0,0.2);border: 2px solid rgba(0,0,0,0.4);border-radius: 60vw;backdrop-filter: blur(5px);color:cornsilk;font-family: Bahnschrift;transition: 1s;">Beautiful Button</button> </body> </html>
Enter fullscreen mode Exit fullscreen mode

Hope you liked my article, and if you, then please comment down your opinions and if you have any other suggestions, then please feel free to express.

Have a good day 😁

Inform Our World - My Website

Top comments (1)

Collapse
 
subhransuindia profile image
Subhransu Patra •

Comment Here!