Scribd
Upload
23 views1 page

Button Hover Effect with CSS

Uploaded by

Azeem Asim Mughal
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
23 views1 page

Button Hover Effect with CSS

Uploaded by

Azeem Asim Mughal
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Hover</title>
<style>
button {
background-color: white;
color: purple;
font-size: 20px;
padding: 10px 20px;
border: 2px solid purple;
position: relative;
overflow: hidden;
cursor: pointer;
}

button::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background-color: purple;
opacity: 0.5;
border-radius: 100%;
transform: translate(-50%, -50%);
}

button::before {
background-color: purple;
transition: all 0.5s;
}
button:hover::before {
width: 100%;
}

</style>
</head>
<body>
<h2>[Link]((b,c) => b > c);</h2>
<button>
Hover Me!
</button>
</body>
</html>

You might also like