<section class="cta">
  <div class="wrapper _770 d-grid text-center">
    <div>
      <p>〇〇〇〇〇</p>
      <a class="button_document" href="#">資料ダウンロード</a>
    </div>
    <div>
      <p>〇〇〇〇〇</p>
      <a class="button_apply" href="#">相談する</a>
    </div>
  </div>
</section>
.cta .d-grid {grid-template-columns: repeat(2,1fr);gap: 0em 2.5em;}
.cta a ,.cta p {color: #fff;text-decoration: none;}
.cta p {font-size: 1.35em;margin-bottom: 0.25em;}
.cta a {display: block;font-size: 1.25em;font-weight: bold;border-radius: 4em;padding: 0.8em 0em;border: solid #FFF 4px;position: relative;overflow: hidden;}
.cta a {position: relative;z-index: 0;transition: .3s;}
.cta a::after{ transition: ease all 0.4s;}
.cta a.button_document::after {background-image: linear-gradient(0deg, #0071b6 50%, #348ec5 0);}
.cta a.button_apply::after {background-image: linear-gradient(0deg, #00866b 50%, #00a397 0);}
.cta a::after {content: "";position: absolute;display: block;width: 100%;height: 100%;top: 0;right: 0;left: 0;margin: auto;bottom: 0;transition: : .3s;background: transparent;z-index: -1;}

.cta {background-image: linear-gradient(45deg, #f18d1e, #e71c24);padding: 1.7em 0em 2.4em;}
.grad_bg {background-image: linear-gradient(90deg, #22af73, #00a397);}
@media screen and (min-width: 681px){
.cta a,.cta a::after {transition: ease all 0.4s;}
.cta a:hover {background: transparent;}
.cta a:hover::after {opacity: 0;}
}

@media screen and (max-width: 680px){
.wrapper {max-width: calc(100% - 40px);}
.title_set {color: #e4801e;}
.cta .d-grid {grid-template-columns: repeat(1,1fr);gap: 2em 2.5em;}
}

External CSS

  1. https://mk8-robo.com/wp-content/themes/mk8-robo/assets/css/style_add-decoration.css
  2. https://codepen.io/mayukoakiyama/pen/abmQpLz

External JavaScript

This Pen doesn't use any external JavaScript resources.