DEV Community

Cover image for Make Interactive button using css
MOHSIN ALI SOOMRO
MOHSIN ALI SOOMRO

Posted on

3 3

Make Interactive button using css

Make interactive button

inteactive gif

HTML

  <div className="App">
      <button>button</button>
    </div>
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

Thanks.

AWS GenAI LIVE image

How is generative AI increasing efficiency?

Join AWS GenAI LIVE! to find out how gen AI is reshaping productivity, streamlining processes, and driving innovation.

Learn more

Top comments (0)

AWS GenAI LIVE image

Real challenges. Real solutions. Real talk.

From technical discussions to philosophical debates, AWS and AWS Partners examine the impact and evolution of gen AI.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay