ボタン

CSS

    
.btn01__link {
    display: inline-block;
    width: 100%;
    padding: 15px 5px;
    text-align: center;
    position: relative;
    border-radius: var(--borderRadius50);
    background-color: var(--gray);
    transition: var(--transitionBase);


    &:hover {
        background-color: var(--black);
        color: var(--gray);

        &::before {
            background-color: var(--gray);
        }

        &::after {
            background-color: var(--black);
        }
    }

    &::before,
    &:after {
        position: absolute;
        content: "";
        top: 50%;
        transition: var(--transitionBase);
    }

    &::before {
        width: 21px;
        height: 21px;
        right: 7%;
        background-color: var(--black);
        border-radius: var(--borderRadius50);
        transform: translateY(-50%);
    }

    &::after {
        width: 7px;
        /* beforeの/3 */
        height: calc(10.5px / 2 * tan(60deg));
        /* pxはbeforeの/2 */
        clip-path: polygon(0 0, 100% 50%, 0 100%);
        right: calc(7% + 9.5px);
        /* pxはbeforeの/2 - 1 */
        transform: translate(50%, -50%);
        background-color: var(--gray);
    }
}
    

CSS

    
                        .btn02__link {
                          display: inline-block;
                          width: 100%;
                          padding: 15px 5px;
                          text-align: center;
                          position: relative;
                          border-radius: var(--borderRadius50);
                          background-color: var(--gray);
                          transition: var(--transitionBase);
                      
                      
                          &:hover::after {
                              /* clip-path: polygon(0 0, 100% 0, 50% 100%);
                              top: calc(50% + 1px); */
                      
                              transform: translate(50%, -50%) scaleY(-1);
                              top: calc(50% + 1px);
                      
                              /* 好きな方で */
                          }
                      
                          &::before,
                          &:after {
                              position: absolute;
                              content: "";
                              top: 50%;
                              transition: var(--transitionBase);
                          }
                      
                          &::before {
                              width: 21px;
                              height: 21px;
                              right: 7%;
                              background-color: var(--black);
                              border-radius: var(--borderRadius50);
                              transform: translateY(-50%);
                          }
                      
                          &::after {
                              width: calc(10.5px / 2 * tan(60deg));
                              /* pxはbeforeの/2 */
                              height: 7px;
                              /* beforeの/3 */
                              clip-path: polygon(50% 0, 100% 100%, 0 100%);
                              right: calc(7% + 10.5px);
                              top: calc(50% - 1px);
                              transform: translate(50%, -50%);
                              background-color: var(--gray);
                          }
                      }
    

CSS

    
                        .btn03__link {
                          display: inline-block;
                          width: 100%;
                          padding: 15px 5px;
                          text-align: center;
                          position: relative;
                          border-radius: var(--borderRadius50);
                          background-color: var(--blue);
                          transition: var(--transitionBase);
                          color: var(--white);
                      
                      
                          &:hover {
                      
                              &::before,
                              &::after {
                                  right: 7%;
                              }
                          }
                      
                          &::before,
                          &:after {
                              position: absolute;
                              content: "";
                              right: 10%;
                              width: 10px;
                              height: 2px;
                              background-color: var(--white);
                              transition: var(--transitionBase);
                          }
                      
                          &::before {
                              transform: rotate(45deg);
                              transform-origin: 100% 0;
                              top: calc(50% + 1px);
                          }
                      
                          &::after {
                              transform: rotate(-45deg);
                              transform-origin: 100% 100%;
                              top: calc(50% - 1px);
                          }
                      }         
    

CSS

    
                        /*******************************************
                        test04 sp時くの字の位置pxで調整
                        *******************************************/
                        .btn04__link {
                            display: inline-block;
                            width: 100%;
                            padding: 15px 5px;
                            text-align: center;
                            position: relative;
                            border-radius: var(--borderRadius50);
                            background-color: var(--blue);
                            transition: var(--transitionBase);
                            color: var(--white);
                        
                        
                            &:hover {
                        
                                &::before {
                                    transform: translateY(-50%) rotate(45deg);
                                }
                        
                                &::after {
                                    transform: translateY(-50%) rotate(-45deg);
                                }
                            }
                        
                            &::before,
                            &:after {
                                position: absolute;
                                content: "";
                                top: 50%;
                                width: 10px;
                                height: 2px;
                                background-color: var(--white);
                                transition: var(--transitionBase);
                            }
                        
                            &::before {
                                right: 30px;
                                transform: translateY(-50%) rotate(-45deg);
                            }
                        
                            &::after {
                                right: 24px;
                                transform: translateY(-50%) rotate(45deg);
                            }
                        }                        
    

CSS

    
                        .btn05__link {
                          display: inline-block;
                          width: 100%;
                          padding: 15px 5px;
                          text-align: center;
                          position: relative;
                          overflow: hidden;
                          background: transparent;
                          color: var(--green);
                          border-radius: var(--borderRadius50);
                          border: 3px solid var(--green);
                          transition: var(--transitionBase);
                      
                          &:hover {
                              color: var(--white);
                      
                              &::before,
                              &::after {
                                  top: 0;
                              }
                          }
                      
                      
                          &::before,
                          &::after {
                              position: absolute;
                              content: "";
                              width: 100%;
                              height: 100%;
                              top: -100%;
                              left: 0;
                              background-color: var(--green);
                              z-index: -1;
                              transition: all .35s;
                          }
                      
                          &::before {
                              opacity: .5;
                          }
                      
                          &:after {
                              transition-delay: .2s;
                          }
                      }                        
    

CSS

コードの説明

    
                        .btn06__link {
                          display: inline-block;
                          width: 100%;
                          padding: 15px 5px;
                          text-align: center;
                          position: relative;
                          overflow: hidden;
                          background: transparent;
                          color: var(--green);
                          border-radius: var(--borderRadius50);
                          border: 3px solid var(--green);
                          transition: var(--transitionBase);
                      
                          &:hover {
                              color: var(--white);
                      
                              &::before,
                              &::after {
                                  left: 0;
                              }
                          }
                      
                      
                          &::before,
                          &::after {
                              position: absolute;
                              content: "";
                              width: 100%;
                              height: 100%;
                              top: 0;
                              left: -100%;
                              background-color: var(--green);
                              z-index: -1;
                              transition: all .35s;
                          }
                      
                          &::before {
                              opacity: .5;
                          }
                      
                          &:after {
                              transition-delay: .2s;
                          }
                      }                  
    

CSS

コードの説明

    
                        .btn07__link {
                          display: inline-block;
                          width: 100%;
                          padding: 15px 5px;
                          text-align: center;
                          color: var(--white);
                      
                          background-size: 300% 100%;
                          /* 背景のサイズを幅300%、高さ100%に設定。これにより、グラデーションがボタンの幅よりも広がり、ホバー時に横方向にスライドできる */
                          background-image: linear-gradient(to right, #25aae1, #40e495, #30dd8a, #2bb673);
                          /* 右方向に向かう線形グラデーションを背景に設定 */
                          box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
                          /* 影をボタンに追加。縦に4pxの距離を取り、15pxのぼかしを設定し、色は少し透明なシアンにする */
                          border-radius: var(--borderRadius50);
                          /* ボタンの角を丸くする。`--borderRadius50` はCSS変数で、角の丸み具合を制御 */
                          -o-transition: all .4s ease-in-out;
                          /* トランジション効果を設定 */
                          -webkit-transition: all .4s ease-in-out;
                          /* トランジション効果を設定 */
                          transition: all .4s ease-in-out;
                          /* トランジション効果を設定。変化時間は0.4秒で、ease-in-outで始めと終わりにゆっくりとした動きをつける */
                      
                          &:hover {
                              background-position: 100% 0;
                              /* ホバー時に背景の位置を「100% 0」に設定し、グラデーションが右側に移動する */
                              -o-transition: all .4s ease-in-out;
                              /* ホバー時にもトランジション効果を適用 */
                              -webkit-transition: all .4s ease-in-out;
                              /* ホバー時にもトランジション効果を適用 */
                              transition: all .4s ease-in-out;
                              /* ホバー時にもトランジション効果を適用し、背景の変化がスムーズになるようにする */
                          }
                      
                      }              
    

CSS

    
                        .btn06__link {
                        .btn08__link {
                          display: inline-block;
                          width: 100%;
                          padding: 15px 5px;
                          text-align: center;
                          color: var(--white);
                      
                          background-size: 300% 100%;
                          background-image: linear-gradient(to right, #29323c, #485563, #2b5876, #4e4376);
                          box-shadow: 0 4px 15px 0 rgba(45, 54, 65, 0.75);
                          border-radius: var(--borderRadius50);
                          -o-transition: all .4s ease-in-out;
                          -webkit-transition: all .4s ease-in-out;
                          transition: all .4s ease-in-out;
                      
                          &:hover {
                              background-position: 100% 0;
                              -o-transition: all .4s ease-in-out;
                              -webkit-transition: all .4s ease-in-out;
                              transition: all .4s ease-in-out;
                          }
                      
                      }                         
    

CSS

    
                        .btn09__link {
                          display: inline-block;
                          padding: 15px 5px;
                          text-align: center;
                          border-top: 1px solid rgba(0, 0, 0, 0);
                          width: 100%;
                          font-weight: 300;
                          -webkit-transition: all 300ms ease-in-out;
                          transition: all 300ms ease-in-out;
                      
                          &::after {
                              color: var(--red);
                              content: '\00bb';
                              /* code for » */
                              display: block;
                              float: right;
                              opacity: 0;
                              overflow: hidden;
                              width: 0;
                              -webkit-transition: all 300ms ease-in-out;
                              transition: all 300ms ease-in-out;
                          }
                      
                          &:hover {
                              background: rgba(255, 255, 255, .2);
                              border-radius: 3px;
                              border-top: 1px solid rgba(255, 255, 255, .1);
                              box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
                              padding-left: 20px;
                              padding-right: 20px;
                      
                              &::after {
                                  opacity: 1;
                                  width: 20px;
                              }
                          }
                      }                      
    

CSS

    
                        .btn10__link {
                          display: inline-block;
                          width: 100%;
                          padding: 15px 5px;
                          text-align: center;
                          position: relative;
                          background-color: var(--black);
                          color: var(--white);
                          transition-duration: 0.5s;
                      
                          &::before,
                          &::after {
                              content: " ";
                              background: var(--lightblue);
                              width: 100%;
                              height: 100%;
                              position: absolute;
                              opacity: 0;
                              -webkit-box-shadow: 0 0 7px 0 var(--lightblue);
                              box-shadow: 0 0 7px 0 var(--lightblue);
                              -webkit-transition-duration: 0.5s;
                              -moz-transition-duration: 0.5s;
                              -o-transition-duration: 0.5s;
                              transition-duration: 0.5s;
                          }
                      
                          &::before {
                              left: -50%;
                              top: 50%;
                          }
                      
                          &::after {
                              right: -50%;
                              top: -50%;
                          }
                      
                          &:hover {
                              color: var(--black);
                      
                              &::before {
                                  opacity: .8;
                                  left: 0;
                                  top: 0;
                              }
                      
                              &::after {
                                  opacity: .8;
                                  right: 0;
                                  top: 0;
                              }
                          }
                      
                      }
                      
                      /* ホバー後に文字を表示させる場合 */
                      .btn10__link span {
                          position: relative;
                          z-index: 100;
                      }          
    

CSS

    
                        @keyframes btn11__link {
                          50% {
                              opacity: 1;
                              /* アニメーションの50%の時点で、不透明度を1（完全に見える状態）に設定 */
                          }
                      
                          100% {
                              opacity: 0;
                              /* アニメーションの100%の時点で、不透明度を0（完全に見えない状態）に設定 */
                              width: 85%;
                              /* 幅を170pxに設定 */
                              height: 85%;
                              /* 高さを170pxに設定 */
                          }
                      }
                      
                      @-webkit-keyframes btn11__link {
                          10% {
                              opacity: 1;
                              /* WebKitブラウザ用に、アニメーションの10%の時点で不透明度を1に設定 */
                          }
                      
                          100% {
                              opacity: 0;
                              /* WebKitブラウザ用に、アニメーションの100%の時点で不透明度を0に設定 */
                              width: 100%;
                              /* 幅を170pxに設定 */
                              height: 100%;
                              /* 高さを170pxに設定 */
                          }
                      }
                      
                      @keyframes btn11-fade {
                      
                          0%,
                          100% {
                              opacity: 1;
                              /* アニメーションの最初と最後で不透明度を1に設定（表示） */
                          }
                      
                          50% {
                              opacity: 0;
                              /* アニメーションの中間で不透明度を0に設定（非表示） */
                          }
                      }
                      
                      
                      .btn11__link {
                          display: inline-block;
                          width: 100%;
                          padding: 15px 5px;
                          text-align: center;
                          position: relative;
                          color: var(--white);
                          background-color: var(--black);
                      
                          &::after {
                              content: " ";
                              width: 100%;
                              height: 100%;
                              position: absolute;
                              left: 0px;
                              top: 0px;
                              border: 2px solid var(--lightblue);
                              opacity: 0;
                              -webkit-box-shadow: 0 0 7px 0 var(--lightblue);
                              box-shadow: 0 0 7px 0 var(--lightblue);
                              -webkit-transition-duration: 0.3s;
                              -moz-transition-duration: 0.3s;
                              -o-transition-duration: 0.3s;
                              transition-duration: 0.3s;
                          }
                      
                          & span {
                              opacity: 1;
                              /* 初期状態で不透明度を1に設定（表示） */
                              transition: opacity 0.3s;
                              /* 不透明度の変化に0.5秒のトランジションを設定 */
                          }
                      
                          &:hover {
                      
                              &::after {
                                  animation: btn11__link 1s linear 0s infinite;
                                  /* btn11__link アニメーションを適用、1秒間でリニアな速度で、0秒から無限に繰り返す */
                                  -webkit-animation: btn11__link 1s linear 0s infinite;
                                  /* WebKitブラウザ用にアニメーションを適用 */
                                  left: 50%;
                                  top: 50%;
                                  transform: translate(-50%, -50%);
                              }
                      
                              & span {
                                  animation: btn11-fade 1.5s infinite;
                              }
                      
                          }
                      }                 
    

CSS

    
                        .btn12__link {
                          display: inline-block;
                          width: 100%;
                          padding: 15px 5px;
                          text-align: center;
                          position: relative;
                          background-color: var(--black);
                          color: var(--white);
                      
                          & span {
                              position: absolute;
                              display: inline-block;
                              width: 10px;
                              height: 10px;
                              transition: var(--transitionBase);
                          }
                      
                          & .top01 {
                              border-top: 2px solid var(--lightblue);
                              border-left: 2px solid var(--lightblue);
                              top: 0;
                              left: 0;
                          }
                      
                          & .top02 {
                              border-top: 2px solid var(--lightblue);
                              border-right: 2px solid var(--lightblue);
                              top: 0;
                              right: 0;
                          }
                      
                          & .bottom03 {
                              border-bottom: 2px solid var(--lightblue);
                              border-right: 2px solid var(--lightblue);
                              bottom: 0;
                              right: 0;
                          }
                      
                          & .bottom04 {
                              border-bottom: 2px solid var(--lightblue);
                              border-left: 2px solid var(--lightblue);
                              bottom: 0;
                              left: 0;
                          }
                      
                          &:hover span {
                              width: 20px;
                              height: 20px;
                          }
                      
                      
                      }                 
    

CSS

    
                        .btn13__link {
                          display: inline-block;
                          width: 100%;
                          padding: 15px 5px;
                          text-align: center;
                          position: relative;
                          overflow: hidden;
                          border: 2px solid var(--red);
                          z-index: 98;
                          transition: var(--transitionBase);
                      
                          &::after {
                              position: absolute;
                              content: "";
                              width: 100%;
                              height: 100%;
                              background-color: var(--red);
                              top: 0;
                              left: -100%;
                              transition: var(--transitionBase);
                          }
                      
                          &:hover {
                              color: var(--white);
                              border-color: transparent;
                      
                              &::after {
                                  left: 0;
                                  z-index: -1;
                              }
                          }
                      
                      }                
    

CSS

    
                        .btn14__link {
                          display: inline-block;
                          width: 100%;
                          padding: 15px 5px;
                          text-align: center;
                          position: relative;
                          overflow: hidden;
                          border: 2px solid var(--lightpink);
                          z-index: 98;
                          transition: var(--transitionBase);
                      
                          &::after {
                              position: absolute;
                              content: "";
                              width: 150%;
                              height: 100%;
                              background-color: var(--lightpink);
                              top: 0;
                              left: -180%;
                              transform: skew(60deg, 0deg);
                              transition: var(--transitionBase);
                          }
                      
                          &:hover {
                              color: var(--white);
                              border-color: transparent;
                      
                              &::after {
                                  left: 50%;
                                  transform: translateX(-50%) skew(60deg, 0deg);
                                  z-index: -1;
                              }
                          }
                      }        
    

CSS

    
                        @keyframes btn15-01 {
                          from {
                              transform: translate(-50%, -50%) rotate(0deg);
                          }
                      
                          /* アニメーション開始時は0度 */
                      
                          to {
                              transform: translate(-50%, -50%) rotate(360deg);
                          }
                      
                          /* 360度回転して1回転完了 */
                      }
                      
                      @keyframes btn15-02 {
                          from {
                              transform: translate(-50%, -50%) rotate(0deg);
                          }
                      
                          /* アニメーション開始時は0度 */
                      
                          to {
                              transform: translate(-50%, -50%) rotate(-360deg);
                          }
                      
                          /* 逆360度回転して1回転完了 */
                      }
                      
                      .btn15__link {
                          display: inline-block;
                          width: 100%;
                          padding: 15px 5px;
                          text-align: center;
                          position: relative;
                          font-weight: 400;
                      
                          &::before,
                          &::after {
                              position: absolute;
                              content: "";
                              width: 100%;
                              height: 100%;
                              border: 1px solid var(--black);
                              left: 50%;
                              top: 50%;
                              transform: translate(-50%, -50%);
                              transition: var(--transitionBase);
                          }
                      
                          &:hover {
                      
                              &::before,
                              &::after {
                                  width: 70px;
                                  height: 70px;
                                  animation-iteration-count: infinite;
                                  /* アニメーションを無限に繰り返すよう指定 */
                                  animation-timing-function: linear;
                                  /* アニメーションの速度を一定にする（変化のない滑らかな動き） */
                              }
                      
                              &::before {
                                  animation-name: btn15-01;
                                  animation-duration: 2s;
                              }
                      
                              &::after {
                                  animation-name: btn15-02;
                                  animation-duration: 3s;
                              }
                      
                          }
                      }         
    

CSS

    
                        .btn16__link {
                          display: inline-block;
                          width: 100%;
                          padding: 15px 5px;
                          text-align: center;
                          position: relative;
                          color: var(--white);
                      
                          & .bg {
                              position: absolute;
                              display: inline-block;
                              width: 100%;
                              height: 100%;
                              top: 0;
                              left: 0;
                              background-color: var(--black);
                              transform: skewX(-30deg);
                              z-index: -1;
                              transition: .2s;
                          }
                      
                          & .bg__line {
                              position: relative;
                              display: inline-block;
                              width: 100%;
                              height: 100%;
                      
                              &::before,
                              &::after {
                                  position: absolute;
                                  content: "";
                                  width: 20%;
                                  height: 100%;
                                  z-index: 1;
                                  transition: 0.2s .2s;
                                  /* 0.2秒で変更、1秒の遅延を追加 */
                              }
                      
                              &::before {
                                  top: 0;
                                  left: 0;
                                  border-top: 3px solid red;
                                  border-left: 3px solid red;
                              }
                      
                              &::after {
                                  bottom: 0;
                                  right: 0;
                                  border-bottom: 3px solid red;
                                  border-right: 3px solid red;
                              }
                          }
                      
                          &:hover {
                              & .bg {
                                  transform: skewX(0deg);
                              }
                      
                              & .bg__line {
                      
                                  &::before,
                                  &::after {
                                      width: 100%;
                                  }
                              }
                          }
                      }          
    

CSS

    
                        .btn17 {
                          position: relative;
                      }
                      
                      .btn17__link {
                          display: inline-block;
                          width: 100%;
                          padding: 15px 5px;
                          text-align: center;
                          border: 2px solid var(--yellow);
                      
                          & span {
                              display: inline-block;
                              /* インラインブロック要素として表示 */
                              transition: 0.25s cubic-bezier(0.5, -1, 0.5, 2);
                              /* トランジション効果を設定 */
                              opacity: 0;
                              /* 初期状態で不透明度を0に設定 */
                              transform: translate(0, -20px);
                              /* 初期位置を上に20px移動 */
                          }
                      
                          &::before {
                              content: attr(data-text);
                              /* data-text属性の内容を表示 */
                              position: absolute;
                              /* 要素を絶対位置で配置 */
                              width: 100%;
                              /* 幅を100%に設定 */
                              left: 0;
                              /* 左端に揃える */
                              transition: 0.25s cubic-bezier(0.5, -1, 0.5, 2);
                              /* トランジション効果を設定 */
                              opacity: 1;
                              /* 初期状態で不透明度を1に設定 */
                              transform: translate(0, 0);
                              /* 初期位置を元に戻す */
                          }
                      
                          &:hover,
                          &:focus {
                              &::before {
                                  opacity: 0;
                                  /* 不透明度を0に設定 */
                                  transform: translate(0, 20px);
                                  /* 下に20px移動 */
                              }
                      
                              & span {
                                  opacity: 1;
                                  /* 不透明度を1に設定 */
                                  transform: translate(0, 0);
                                  /* 初期位置に戻す */
                              }
                          }
                      }           
    

CSS

    
                        .btn10__link {
                          display: inline-block;
                          width: 100%;
                          padding: 15px 5px;
                          text-align: center;
                          position: relative;
                          background-color: var(--black);
                          color: var(--white);
                          transition-duration: 0.5s;
                      
                          &::before,
                          &::after {
                              content: " ";
                              background: var(--lightblue);
                              width: 100%;
                              height: 100%;
                              position: absolute;
                              opacity: 0;
                              -webkit-box-shadow: 0 0 7px 0 var(--lightblue);
                              box-shadow: 0 0 7px 0 var(--lightblue);
                              -webkit-transition-duration: 0.5s;
                              -moz-transition-duration: 0.5s;
                              -o-transition-duration: 0.5s;
                              transition-duration: 0.5s;
                          }
                      
                          &::before {
                              left: -50%;
                              top: 50%;
                          }
                      
                          &::after {
                              right: -50%;
                              top: -50%;
                          }
                      
                          &:hover {
                              color: var(--black);
                      
                              &::before {
                                  opacity: .8;
                                  left: 0;
                                  top: 0;
                              }
                      
                              &::after {
                                  opacity: .8;
                                  right: 0;
                                  top: 0;
                              }
                          }
                      
                      }
                      
                      /* ホバー後に文字を表示させる場合 */
                      .btn10__link span {
                          position: relative;
                          z-index: 100;
                      }          
    

CSS

    
                        .btn19 a {
                          display: inline-block;
                          width: 100%;
                          padding: 15px 5px;
                          text-align: center;
                          padding: 0;
                      }
                      
                      .btn19__link {
                          position: relative;
                          color: var(--white);
                          height: 50px;
                          transition: .3s;
                      
                      }
                      
                      .btn19__txt {
                          position: absolute;
                          width: 100%;
                          height: 100%;
                          line-height: 50px;
                      
                          &:first-child {
                              bottom: 100%;
                              transform-origin: center bottom 0px;
                              transform: matrix3d(1, 0, 0, 0,
                                      0, 0, -1, -0.003,
                                      0, 1, 0, 0,
                                      0, 0, 0, 1);
                      
                              -webkit-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995);
                              -moz-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995);
                              -o-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995);
                              transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995);
                          }
                      
                          &:nth-of-type(2) {
                              top: 100%;
                              transform-origin: center top 0px;
                              transform: matrix3d(1, 0, 0, 0,
                                      0, 1, 0, 0,
                                      0, 0, 1, -0.003,
                                      0, -50, 0, 1);
                      
                              -webkit-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995);
                              -moz-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995);
                              -o-transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995);
                              transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995);
                          }
                      }
                      
                      
                      
                      .cubeBox {
                          position: absolute;
                          top: 0;
                          left: 0;
                          display: flex;
                          justify-content: space-between;
                          width: 100%;
                          height: 100%;
                          z-index: -1;
                      }
                      
                      .cube {
                          position: relative;
                          display: inline-block;
                          width: calc(100% / 4);
                          height: 100%;
                      
                      
                      }
                      
                      .cube:before,
                      .cube:after {
                          content: "";
                          position: absolute;
                          width: 100%;
                          height: 100%;
                          left: 0;
                          transition: all 500ms cubic-bezier(0.970, 0.000, 0.395, 0.995);
                      }
                      
                      .cube:before {
                          background-color: var(--gray);
                          bottom: 100%;
                          transform-origin: center bottom 0px;
                          transform: matrix3d(1, 0, 0, 0,
                                  0, 0, -1, -0.003,
                                  0, 1, 0, 0,
                                  0, 0, 0, 1);
                      }
                      
                      .cube:after {
                          background-color: var(--green);
                          top: 100%;
                          transform-origin: center top 0px;
                          transform: matrix3d(1, 0, 0, 0,
                                  0, 1, 0, 0,
                                  0, 0, 1, -0.003,
                                  0, -50, 0, 1);
                      }
                      
                      /* ホバー */
                      .btn19__link:hover {
                          color: var(--green);
                      }
                      
                      .btn19__link:hover .cube:before {
                          background: var(--yellow);
                          transform: matrix3d(1, 0, 0, 0,
                                  0, 1, 0, 0,
                                  0, 0, 1, 0.003,
                                  0, 50, 0, 1);
                      }
                      
                      .btn19__link:hover .cube::after {
                          background: #bdaeae;
                          transform: matrix3d(1, 0, 0, 0,
                                  0, 0, -1, 0.003,
                                  0, 1, 0, 0,
                                  0, 0, 0, 1);
                      }
                      
                      .btn19__link:hover .btn19__txt:first-child {
                          transform: matrix3d(1, 0, 0, 0,
                                  0, 1, 0, 0,
                                  0, 0, 1, 0.003,
                                  0, 50, 0, 1);
                      }
                      
                      .btn19__link:hover .btn19__txt:nth-of-type(2) {
                          transform: matrix3d(1, 0, 0, 0,
                                  0, 0, -1, 0.003,
                                  0, 1, 0, 0,
                                  0, 0, 0, 1);
                      }
                      
                      /* 速さ */
                      .cube:nth-of-type(1):before,
                      .cube:nth-of-type(1):after {
                          transition-delay: 0s;
                      }
                      
                      .cube:nth-of-type(2):before,
                      .cube:nth-of-type(2):after {
                          transition-delay: 0.1s;
                      }
                      
                      .cube:nth-of-type(3):before,
                      .cube:nth-of-type(3):after {
                          transition-delay: 0.2s;
                      }
                      
                      .cube:nth-of-type(4):before,
                      .cube:nth-of-type(4):after {
                          transition-delay: 0.3s;
                      }    
    

CSS

    
                        /*******************************************
                        test20 白にすれば光ってるように見える
                        *******************************************/
                        .btn20__link {
                            display: inline-block;
                            width: 100%;
                            padding: 15px 5px;
                            text-align: center;
                            position: relative;
                            color: var(--blue);
                            text-decoration: none;
                            overflow: hidden;
                            transition: .15s;
                        
                        
                        }
                        
                        
                        
                        .btn20__link:hover {
                            color: var(--white);
                            background: var(--lightgreen);
                            box-shadow: 0 0 10px var(--lightgreen), 0 0 40px var(--lightgreen), 0 0 80px var(--lightgreen);
                            transition-delay: .9s;
                            animation: infinite;
                        }
                        
                        .btn20__link div {
                            position: absolute;
                            display: block;
                        }
                        
                        .btn20__link div:nth-child(1) {
                            top: 0;
                            left: -100%;
                            width: 100%;
                            ;
                            height: 2px;
                            background: linear-gradient(90deg, transparent, var(--lightgreen));
                        
                        }
                        
                        .btn20__link:hover div:nth-child(1) {
                            left: 100%;
                            transition: .75s;
                        }
                        
                        .btn20__link div:nth-child(3) {
                            bottom: 0;
                            right: -100%;
                            width: 100%;
                            ;
                            height: 2px;
                            background: linear-gradient(270deg, transparent, var(--lightgreen));
                        }
                        
                        .btn20__link:hover div:nth-child(3) {
                            right: 100%;
                            transition: .5s;
                            transition-delay: .6s;
                        }
                        
                        .btn20__link div:nth-child(2) {
                            top: -100%;
                            right: 0;
                            height: 100%;
                            ;
                            width: 2px;
                            background: linear-gradient(180deg, transparent, var(--lightgreen));
                        }
                        
                        .btn20__link:hover div:nth-child(2) {
                            top: 100%;
                            transition: 1s;
                            transition-delay: .25s;
                        
                        }
                        
                        .btn20__link div:nth-child(4) {
                            bottom: -100%;
                            left: 0;
                            height: 100%;
                            ;
                            width: 2px;
                            background: linear-gradient(45deg, transparent, var(--lightgreen));
                        }
                        
                        .btn20__link:hover div:nth-child(4) {
                            bottom: 100%;
                            transition: .5s;
                            transition-delay: .75s;
                        
                        }      
    

CSS

    
                        .btn21__link {
                          display: inline-block;
                          width: 100%;
                          padding: 15px 5px;
                          text-align: center;
                          position: relative;
                          border-radius: var(--borderRadius50);
                          background-color: var(--yellow);
                          transition: var(--transitionBase);
                      
                          &::after {
                              position: absolute;
                              content: "";
                              top: 0;
                              left: -100%;
                              width: 100%;
                              height: 100%;
                              background-image: linear-gradient(130deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80%);
                              transition: var(--transitionBase);
                              pointer-events: none;
                          }
                      
                          &:hover::after {
                              top: 0;
                              left: 100%;
                      
                          }
                      
                      }