Just some really deep button designs

index.html

<h1>Just some button designs</h1>
<h3>that really float.</h3>

<!-- <small>(They float. That's what makes them deep.)</small> -->

<hr>

<button>Classic “floating” button</button>

<hr>

<button class="border-radius">Floating button with rounded corners</button>

<hr>

<button class="border-radius two">And like, completely rounded corners</button>

<hr>

<!-- <small>Thanks for viewing!</small> -->

<h5 class="muted">This pen created by: James Futhey. Thanks for viewing!</h5>

just-some-really-deep-button-designs.markdown

Just some really deep button designs

A Pen by James Futhey on CodePen.

License.

style.css

body {
  padding: 45px;
  text-align: center;
  font-family: 'Avenir next', Lato, sans-serif;
}

hr {
  margin: 75px 0;
  opacity: 0.25;
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: 75px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

small {
  opacity: 0.65;
}

.muted {
  opacity: 0.25;
  margin-top: 140px;
}

button {
  text-transform: uppercase;
  background-color: rgb(96, 96, 232);
/*   letter-spacing: -0.025em; */
  padding: 18px 40px;
  border-radius: 3px;
  font-weight: 500;
  font-size: 13px;
  border: none;
  color: #fff;
  cursor: pointer;
  transition: all 240ms ease;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.2);
  outline: none;
}

button:hover {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  background-color: rgb(86, 86, 232);
  transform: translateY(6px);
}

button:focus {
  outline: none; /* Because, Chrome, WTF*/
}

button.border-radius {
  border-radius: 9px;
}

button.border-radius.two {
  border-radius: 28px;
  font-weight: 600;
}