CSS
html, body {
height: 100%;
width: 100%;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
background-color: #444444;
}
/* Normal Button */
button {
display: inline-block;
margin: 0.75rem;
padding: 0.75rem 1.5rem;
border: none;
border-radius: 0.1875rem;
outline: none;
background-color: #ea4c89;
color: white;
font-family: inherit;
font-size: 1.125em;
font-weight: 300;
line-height: 1.5rem;
text-decoration: none;
text-transform: uppercase;
cursor: pointer;
transition: all 150ms ease-out;
width: 300px;
letter-spacing: 4px;
}
button:focus,
button:hover {
background-color: #ea4c89;
box-shadow: 0 0 0 0.1875rem white,
0 0 0 0.375rem #ea4c89;
}
button:active {
background-color: #ea4c89;
box-shadow: 0 0 0 0.1875rem #ea4c89,
0 0 0 0.375rem #ea4c89;
transition-duration: 75ms;
}
/* Outline Button */
button.outline {
border: 0.1875rem solid #ea4c89;
background-color: transparent;
color: #ea4c89;
}
button.outline:focus,
button.outline:hover {
border-color: #ea4c89;
color: #ea4c89;
}
button.outline:active {
border-color: #ea4c89;
color: #ea4c89;
}
