CSS button

by RenaissanceDesign

HTML

<div>
  <button>
    Hello World
  </button>
</div>

CSS

div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 400px;
  background-color: #143258;
}

button {
  font-size: 1.2em;
  letter-spacing: .05em;
  position: relative;
  display: block;
  padding: 1em 2em;
  color: transparent;
  border-radius: 2em;
  border: 1px solid rgba(136, 229, 172, 0.75);
  text-transform: uppercase;
  background: rgb(193, 254, 210);
  background: linear-gradient(180deg, rgba(193, 254, 210, 1) 0%, rgba(173, 254, 211, 1) 3%, rgba(240, 252, 212, 1) 100%), linear-gradient(249deg, rgba(229, 252, 200, 0.7) 0%, rgba(240, 252, 212, 0.2) 100%);
  box-shadow: 0 5px 0 0 rgba(227, 255, 238, 0.65) inset;
}

button::after {
  content: "Hello World";
  padding: 1em 2em;
  background: -webkit-linear-gradient(270deg, #20aaac 0%, #33dea9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}