*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;
}

.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  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;
}
body {
  padding: 30px;
  background: #000;
}

.btn-border-gradient-wrap {
  display: inline-block;
  padding: 0.2rem;
  border-radius: 0.5rem;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(yellow),
    to(green)
  );
  background: -webkit-linear-gradient(left, yellow, green);
  background: linear-gradient(to right, yellow, green);
}

.btn-border-gradient-wrap:hover {
  background: -webkit-gradient(
    linear,
    right top,
    left top,
    from(yellow),
    to(green)
  );
  background: -webkit-linear-gradient(right, yellow, green);
  background: linear-gradient(to left, yellow, green);
}

a.btn-border-gradient {
  color: #8fc31f;
  background: #000;
}







.example {
  position: relative;
  }

.example a {/*aタグを画像の真ん中に*/
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  /*以下装飾*/
  margin:0;/*余計な隙間を除く*/
  font-size: 20px;/*文字サイズ*/
  border: solid white 2px; /*線で囲う*/
  padding: 7px;/*文字と線の間の余白*/
  color: white;/*文字色*/
  text-decoration: none;/*下線を表示させない*/
  }

.example a:hover{/*カーソルを当てたとき*/
  background: rgba(255, 255, 255, 0.3);/*背景を半透明に*/
  }

.example img {
  width: 100%;
  }