<div class="container">
  <a class="c-button is-md" href="https://grow-group.jp/about/">
    <span>PUSH ME</span>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44.875 5.784">
            <path id="26363" data-name="26363" d="M916.9,1645.577h42l-5.054-4" transform="translate(-916.902 -1640.793)" fill="none" stroke="#65A04D" stroke-width="2"></path>
    </svg>
  </a>
</div>
/* ここはコピーしなくてOK */
.container {
  text-align: center;
  padding-top: 40px;
  @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700&display=swap');
  font-family: 'Noto Sans JP', sans-serif;
}

/* ここから下がボタンのCSS */
.c-button {
  outline: none;
  display: inline-block;
  width: inherit;
  min-width: 240px;
  text-align: center;
  background-color: #FFF;
  color: #65A04D;
  border-bottom: 1px solid #65A04D;
  text-decoration: none;
  position: relative;
  transition: all 0.3s;
  padding: 24px 24px;
  box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.05);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.05em;
  opacity: 1 !important;
}
.c-button span {
  position: relative;
  z-index: 99;
}
.c-button:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: #65A04D;
  transition: all 0.3s;
}
.c-button svg {
  width: 45px;
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 99;
  transition: all 0.2s;
}
.c-button:hover {
  color: #FFF;
}
.c-button:hover:after {
  width: 100%;
}
.c-button:hover svg path {
  stroke: #FFF;
  transition: all 0.1s 0.2s;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.