DEV Community

Cover image for Update for my previous post 'How to create a button with hover effect using HTML and CSS
'
Subhransu Patra
Subhransu Patra

Posted on

Update for my previous post 'How to create a button with hover effect using HTML and CSS '

<p>Hello</p>
Enter fullscreen mode Exit fullscreen mode

My Website :- Inform Our World
Latest Chapter :- Saqha । Chapter 1

I updated some of the code from my previous post.

The button is okay for the respective background. But with the white background or any other, it isn't looking decent. So I have recoded the code. Full code here :-

<!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;

}

.btn:hover {
  box-shadow: -2px 2px 50px blue;transition: 1s;
}
</style>
</head>
<body>

<button class="btn" style="padding: 10px;background: rgb(123,123,255);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

Or another way

<!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: red;
}

.btn:hover {
  box-shadow: -2px 2px 50px rgba(0,0,0,0.6);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

Sorry for lateness of debugging.

Top comments (0)