MOHSIN ALI SOOMRO
Posted on July 3, 2022
Make interactive button
HTML
<div className="App">
<button>button</button>
</div>
CSS
* {
padding: 0px;
margin: 0px;
}
.App {
font-family: sans-serif;
text-align: center;
background-color: #e0e0e0;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
button {
background: #e0e0e0;
box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
background-color: #e0e0e0;
border: none;
border-radius: 50px;
width: 200px;
height: 200px;
}
button:active {
border-radius: 50px;
background: #e0e0e0;
box-shadow: inset 20px 20px 60px #bebebe, inset -20px -20px 60px #ffffff;
}
button:focus {
border-radius: 50px;
background: #e0e0e0;
box-shadow: inset 20px 20px 60px #bebebe, inset -20px -20px 60px #ffffff;
}
Thanks.
💖 💪 🙅 🚩
MOHSIN ALI SOOMRO
Posted on July 3, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.