<a href="" class="button01">ボタン01</a>
<a href="" class="button01">ボタン01</a>
/* No context defined for this component. */
  • Content:
    $(function () {
      $('.button01').on('click', function () {
        alert('clicked!');
      });
    });
    
  • URL: /components/raw/button01/index.js
  • Filesystem Path: components\buttons\button01\index.js
  • Size: 94 Bytes
  • Content:
      .button01 {
        height: 50px;
        width: 180px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 15px 0 rgba(58, 80, 107, 0.4);
        cursor: pointer;
        transition: 0.4s ease-in-out;
        position: relative;
        overflow: hidden;
        color: #333333;
        background-color: #fcd311;
      }
    
      .button01:hover {
        color: #ffffff;
        opacity: 0.9;
      }
    
      .button01::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 220%;
        background-color: #111;
        transform-origin: left bottom;
        transform: skewY(-10deg) scale(1, 0);
        transition: transform 0.6s;
        z-index: -1;
      }
    
      .button01:hover::after {
        transform-origin: left top;
        transform: skewY(-10deg) scale(1, 1);
      }
    
  • URL: /components/raw/button01/style.css
  • Filesystem Path: components\buttons\button01\style.css
  • Size: 781 Bytes

コンバージョンボタンとして使用