KamCode: Stylish Button

Neumorphism Button using html css only

Code
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=\, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
  <title>Neumorphism Button</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background: rgb(224, 229, 236);
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

    .box {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30px;
      width: 60px;
      height: 60px;
      margin-right: 20px;
      border-radius: 10px;
      box-shadow: 9px 9px 16px rgb(163, 177, 198, 0.6),
        -9px -9px 16px rgba(255, 255, 255, 0.5);
      cursor: pointer;
      transition: all 1.5s linear;
    }

    .round {
      border-radius: 50%;
    }

    .heart i {
      color: rgb(226, 45, 72);
      transition: all 0.5s linear;
    }

    .euro,
    .dollar i {
      color: rgb(4, 165, 138);
      transition: all 0.5s linear;
    }

    .box:hover {
      box-shadow: inset 9px 9px 16px rgb(163, 177, 198, 0.6),
        inset -9px -9px 16px rgb(2555, 255, 255, 0.5);
    }

    .box:hover i {
      text-shadow: 9px 9px 16px rgb(163, 177, 198, 0.6),
        -9px -9px 16px rgba(255, 255, 255, 0.5);
    }
  </style>
</head>
<body>
  <div class="box round euro">
    <i class="fas fa-euro-sign"></i>
  </div>
  <div class="box heart">
    <i class="fa fa-heart"></i>
  </div>
  <div class="box round dollar">
    <i class="fas fa-dollar-sign"></i>
  </div>
</body>
</html>
Stylish Button

Neumorphism Button using html css only

KamCode | All right reserved.
