Stylish Button css code by codeviraj

<!-- HTML !-->

<button class="button-29" role="button">Button 29</button>

/* CSS */

.button-29 {

  align-items: center;

  appearance: none;

  background-image: radial-gradient(100% 100% at 100% 0, #5adaff 0, #5468ff 100%);

  border: 0;

  border-radius: 6px;

  box-shadow: rgba(45, 35, 66, .4) 0 2px 4px,rgba(45, 35, 66, .3) 0 7px 13px -3px,rgba(58, 65, 111, .5) 0 -3px 0 inset;

  box-sizing: border-box;

  color: #fff;

  cursor: pointer;

  display: inline-flex;

  font-family: "JetBrains Mono",monospace;

  height: 48px;

  justify-content: center;

  line-height: 1;

  list-style: none;

  overflow: hidden;

  padding-left: 16px;

  padding-right: 16px;

  position: relative;

  text-align: left;

  text-decoration: none;

  transition: box-shadow .15s,transform .15s;

  user-select: none;

  -webkit-user-select: none;

  touch-action: manipulation;

  white-space: nowrap;

  will-change: box-shadow,transform;

  font-size: 18px;

}

.button-29:focus {

  box-shadow: #3c4fe0 0 0 0 1.5px inset, rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;

}

.button-29:hover {

  box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;

  transform: translateY(-2px);

}

.button-29:active {

  box-shadow: #3c4fe0 0 3px 7px inset;

  transform: translateY(2px);

}

---

<!-- HTML !-->

<button class="button-32" role="button">Button 32</button>

/* CSS */

.button-32 {

  background-color: #fff000;

  border-radius: 12px;

  color: #000;

  cursor: pointer;

  font-weight: bold;

  padding: 10px 15px;

  text-align: center;

  transition: 200ms;

  width: 100%;

  box-sizing: border-box;

  border: 0;

  font-size: 16px;

  user-select: none;

  -webkit-user-select: none;

  touch-action: manipulation;

}

.button-32:not(:disabled):hover,

.button-32:not(:disabled):focus {

  outline: 0;

  background: #f4e603;

  box-shadow: 0 0 0 2px rgba(0,0,0,.2), 0 3px 8px 0 rgba(0,0,0,.15);

}

.button-32:disabled {

  filter: saturate(0.2) opacity(0.5);

  -webkit-filter: saturate(0.2) opacity(0.5);

  cursor: not-allowed;

}

---

<!-- HTML !-->

<button class="button-85" role="button">Button 85</button>

/* CSS */

.button-85 {

  padding: 0.6em 2em;

  border: none;

  outline: none;

  color: rgb(255, 255, 255);

  background: #111;

  cursor: pointer;

  position: relative;

  z-index: 0;

  border-radius: 10px;

  user-select: none;

  -webkit-user-select: none;

  touch-action: manipulation;

}

.button-85:before {

  content: "";

  background: linear-gradient(

    45deg,

    #ff0000,

    #ff7300,

    #fffb00,

    #48ff00,

    #00ffd5,

    #002bff,

    #7a00ff,

    #ff00c8,

    #ff0000

  );

  position: absolute;

  top: -2px;

  left: -2px;

  background-size: 400%;

  z-index: -1;

  filter: blur(5px);

  -webkit-filter: blur(5px);

  width: calc(100% + 4px);

  height: calc(100% + 4px);

  animation: glowing-button-85 20s linear infinite;

  transition: opacity 0.3s ease-in-out;

  border-radius: 10px;

}

@keyframes glowing-button-85 {

  0% {

    background-position: 0 0;

  }

  50% {

    background-position: 400% 0;

  }

  100% {

    background-position: 0 0;

  }

}

.button-85:after {

  z-index: -1;

  content: "";

  position: absolute;

  width: 100%;

  height: 100%;

  background: #222;

  left: 0;

  top: 0;

  border-radius: 10px;

}

---