<body class="container">
  <div class="card font-regular">
    <div class="card-heading">Solid Buttons</div>
    <button type="button" class="btn btn-light">Light Button</button>
    <button type="button" class="btn btn-dark">Dark Button</button>
    <button type="button" class="btn btn-accent">Accent Button</button>
  </div>
  <div class="card font-regular">
    <div class="card-heading">Outlined Buttons</div>
    <button type="button" class="btn btn-light-outline">Light Button</button>
    <button type="button" class="btn btn-dark-outline">Dark Button</button>
    <button type="button" class="btn btn-accent-outline">Accent Button</button>
  </div>
  <div class="card font-regular">
    <div class="card-heading">Full Width Buttons</div>
    <button type="button" class="btn btn-light btn-full">Full Width Light Button</button>
    <button type="button" class="btn btn-dark btn-full">Full Width Dark Button</button>
    <button type="button" class="btn btn-accent btn-full">Full Width Accent Button</button>
  </div>
  <div class="card font-regular">
    <div class="card-heading">Full Width Outline Buttons</div>
    <button type="button" class="btn btn-light-outline btn-full">Full Width Light Button</button>
    <button type="button" class="btn btn-dark-outline btn-full">Full Width Dark Button</button>
    <button type="button" class="btn btn-accent-outline btn-full">Full Width Accent Button</button>
  </div>
</body>
html,
body {
  background-color: #006865;
  color: #3f3f3f;
}

span {
  color: #ff6f61;
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  font-family: "Lato", sans-serif;
  padding: 2rem;
}

.card {
  margin: 1rem;
  padding: 2rem;
  border-radius: 5px;
  flex-grow: 1;
  background-color: #ffffff;
}

.card-heading {
  background-color: #3f3f3f;
  color: #ebfdff;
  padding: 0.5rem;
  text-align: center;
  margin-bottom: 1rem;
  border-radius: 3px;
}

.font-regular {
  font-weight: 400;
}

.font-bold {
  font-weight: 700;
}

.btn {
  padding: 1rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  margin-right: 1rem;
  border-radius: 50px;
  border: none;
  background-color: #EBFDFF;
  color: #006865;
}

.btn:focus {
  outline-width: 0px;
}

.btn:hover {
  background-color: #CDF7FB;
  cursor: pointer;
}

.btn-light {
  background-color: #EBFDFF;
  color: #006865;
}

.btn-light:hover {
  background-color: #CDF7FB;
}

.btn-dark {
  background-color: #1e1e1e;
  color: #ffffff;
}

.btn-dark:hover {
  background-color: #3f3f3f;
}

.btn-accent {
  background-color: #ff6f61;
  color: #ffffff;
}

.btn-accent:hover {
  background-color: #F75141;
}

.btn-light-outline {
  background-color: transparent;
  border: solid #99dedf 2px;
  color: #006865;
}

.btn-light-outline:hover {
  background-color: #CDF7FB;
}

.btn-dark-outline {
  background-color: transparent;
  border: solid #1e1e1e 2px;
  color: #1e1e1e;
}

.btn-dark-outline:hover {
  background-color: #3f3f3f;
  color: #ffffff;
}

.btn-accent-outline {
  background-color: transparent;
  border: solid #ff6f61 2px;
  color: #ff6f61;
}

.btn-accent-outline:hover {
  background-color: #ff6f61;
  color: #ffffff;
}

.btn-full {
  display: block;
  width: 100%;
  margin-bottom: 1rem;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.