Animation button 1

by Julien Roche

HTML

<body>
  <div class="awesome-button" role="button">Ok</div>
</body>

CSS

body {
  text-align: center;
}

.awesome-button {
  background-color: #2ecc71;
  border: 4px solid #2ecc71;
  border-radius: 20px;
  color: #ffffff;
  cursor: pointer;
  display: inline-block;
  font-weight: bolder;
  min-width: 75px;
  padding: 10px 10px 10px 10px;
  text-align: center;
  transition: all 250ms linear;
  transition-property: background-color, border-color, color, min-width;
  user-select: none;
  -webkit-user-select: none;
}

.awesome-button:hover {
  background-color: #27ae60;
  min-width: 175px;
}

.awesome-button:active {
  background-color: #ffffff;
  border-color: #95a5a6;
  color: #27ae60;
}