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

#html #css #frontenddeveloper

<p>Hello</p>

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.

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 🙃

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 - My Website