<a class="button" href="#">Button</a>
<div>Elements</div>
body {
  text-align: center;
}
a {
  display: inline-block;
  margin: 1em;
  padding: .3em 3em;
  background: linear-gradient(70deg, #00c9ff, #92fe9d);
  border-radius: .4em 2em .5em 3em/3em .5em 2em .5em;
  color: #fff;
  font-size: 2em;
  font-family: 'Coming Soon', cursive;
  font-weight: 400;
  text-decoration: none;
  text-align: center;
}
div {
  display: inline-block;
  margin: 1em;
  padding: 2.5em 2em;
  background: linear-gradient(70deg, #00c9ff, #92fe9d);
  border-radius: 60% 40% 50% 30%/50% 70% 40% 70%;
  color: #fff;
  font-size: 2em;
  font-family: 'Coming Soon', cursive;
  font-weight: 400;
}

External CSS

  1. https://fonts.googleapis.com/css?family=Coming+Soon

External JavaScript

This Pen doesn't use any external JavaScript resources.