Components and Style

Buttons

.button {
border-radius: 20px;
border: 1px solid #212121;
background-color: #212121;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
padding: 12px 45px;
letter-spacing: 1px;
text-transform: uppercase;
transition: transform 80ms ease-in;
text-decoration: none;
}

.button:hover {
transform: scale(1.1);
transition: 0.5s;
}

.button:focus {
outline: none;
}

Forms

HTML

<div class="form" method="update">
  <p>{{ message }}</p>
  <div class="form-group">
    <label>First Name</label>
    <input
      type="First Name"
      v-model="first_name"
      class="form-control active"
      placeholder="Jane"
      autocomplete="on"
    />
  </div>
</div>

CSS

.form {
 display: inline-block;
}

.form-group {
text-align: left;
}

.form-control {
 width: 500px;
border-color: black;
}