DEV Community

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

Posted on

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.

Discussion (0)