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 '

#html #css #update #button 
<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)