How to create a button with hover effect using HTML and CSS
Tags: html, css, frontenddeveloper
Published: 2021-12-09 04:42:03


```
<p>Hello</p>
```
My Website, [Inform Our World](http://subhransuindia.github.io/)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/36ddls4y3pzpv7s2z57z.jpg)

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>
```

Then under the style,

```
<style>
.btn {
/* Here we will be placing the style components */
}
</style>
```

Or simply you can write beside the TagName,

```
<button style="/* Here we will be placing the style components */">Ugly Button</button>
```

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>
```
Then add some padding

```
<button style="padding: 10px;">Ugly Button</button>
```

Then change the color of the button

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

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>
```

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>
```

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>
```

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>
```

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>
```

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>
```

And yeah! your beautiful button is ready 🙃


![Beautiful Button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kx8we22taz5a8661quke.jpg)

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>
```

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](http://subhransuindia.github.io/) - My Website