<a href='#' class='btn'>Submit</a>
<a href='#' class='btn btn-red'>Submit</a>
<a href='#' class='btn btn-green'>Submit</a>
<a href='#' class='btn btn-gray'>Submit</a>
<a href='#' class='btn btn-purple'>Submit</a>
.btn {
  --btnColor: #5eb5ff;
  border: 1px solid var(--btnColor);
  color: var(--btnColor);
  background-color: white;
  padding: 10px 25px;
  text-decoration: none;
  font-family: "Output Sans";
  font-weight: 600;
  border-radius: 3px;
  margin: 5px;
  transition: all .3s ease;
  &:hover {
    color: white;
    background-color: var(--btnColor);

.btn-red {
  --btnColor: #ff6969;

.btn-green {
  --btnColor: #7ae07a;

.btn-gray {
  --btnColor: #555;

.btn-purple {
  --btnColor: #ef34ef;

// just styling the rest of the page

html, body {
  height: 100%;

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #eee;
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.