*,

*:before,

*:after {

  -webkit-box-sizing: inherit;

  box-sizing: inherit;

}



html {

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

}



.btn,

a.btn,

button.btn {

  font-size: 1.1rem;

  font-weight: 700;

  line-height: 1.2;

  position: relative;

  display: inline-block;

  padding: 0.5rem 1.0rem;

  cursor: pointer;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

  -webkit-transition: all 0.3s;

  transition: all 0.3s;

  text-align: center;

  vertical-align: middle;

  text-decoration: none;

  letter-spacing: 0.1em;

  color: #212529;

  border-radius: 0.5rem;

}



a.btn-border {

  -bottom: 0px;

  padding: 0.5rem;



  -webkit-transition: all 0.3s;



  transition: all 0.3s;



  border: 2px solid #000;

  background: -webkit-radial-gradient(#000 15%, rgba(0, 0, 0, 0) 16%),

    -webkit-radial-gradient(#000 15%, rgba(0, 0, 0, 0) 16%), #fc0;

  background: radial-gradient(#000 15%, rgba(0, 0, 0, 0) 16%),

    radial-gradient(#000 15%, rgba(0, 0, 0, 0) 16%), #fc0;

  background-position: 0 0, 6px 6px;

  background-clip: border-box;

  background-origin: padding-box;

  background-size: 12px 12px;

}



a.btn-border span {

  position: relative;



  display: block;



  padding: 1.25rem 3rem;



  color: #000;

  border: 2px solid #000;

  border-radius: 0.5rem;

  background: #fff;

}



a.btn-border:hover {

  background-position: 0 0, 8px 8px;

  background-size: 16px 16px;

}