Style Guide

Button 01 

<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

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