Редактировать кнопку веб-страницы с помощью CSS

Я новичок в HTML/CSS и хочу изменить стиль кнопки. Это html-код:

<div class = "sign-in-wrap">
<a href = "#" target = "_self" class = "btn-sign-in">START EXPLORING</a>
</div>

и это CSS:

.btn-sign-in {
  width: 180px;
  height: 50px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background-color: #10cb6c;
  line-height: 50px;
  color: #fff;
  font-size: 16px;
  text-align: center;
  display: block;
  -webkit-transition: .4s;
  -o-transition: .4s;
  transition: .4s;
  white-space: nowrap
}

.btn-sign-in:hover {
  color: #fff;
  background-color: #2add82
}

Чего я хочу добиться, так это стиля https://codepen.io/Cyris/pen/abpjJrK.

Уже пытался применить код CSS к моему .btn-sign-in по ссылке выше, но не работает на 100%.

Что я делаю неправильно?