<section>
  <div>
    <button class="btn">Mais um botão</button>
  </div>
  <span id="by">&copySthéffaneNunes</span>
</section>
@import url('https://fonts.googleapis.com/css?family=Arima+Madurai&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100vh;
}

body {
  background-color: #4A676A;
  font-family: Roboto, Arial, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn {
  height: 70px;
  width: 250px;
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  background-color: transparent;
  outline: none;
  border: 3px solid #FFEAA5;
  color: #FFEAA5;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  transition: all .3s;
}

.btn:hover {
  color: #FFB037;
  border: 3px solid #FFB037;
  animation: shake .3s linear;
}

@keyframes shake {
  0%, 100% {
    transform: rotate(0);
  }
  25%, 75% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(10deg);
  }
}

/*-----------------------*/
#by {
  font-family: 'Arima Madurai', cursive;
  color: #C1D0D0;
  font-size: 10px;
  widht: auto;
}

/*
light-blue: #C1D0D0;
dark-blue: #4A676A;
cream: #FFEAA5;
yellow: #FFB037;
*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.