<p>Hello</p>
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>
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>
Sorry for lateness of debugging.
Top comments (0)