Button

<main class="main-wrapper">
    <button type="button" class="button">Button</button>

    <button type="button" class="button depth-effect mt48">
        <span class="after">Hover</span>
        <span class="before">Button</span>
    </button>

    <button type="button" class="button double-door-effect mt48">Button</button>

    <p class="mt48">※ a要素(ページ遷移リンク)とbutton要素(アクショントリガー、またはsubmit)の見た目はそれぞれ変えてください</p>
</main>
<main class="main-wrapper">
  <button type="button" class="button">Button</button>

  <button type="button" class="button depth-effect mt48">
    <span class="after">Hover</span>
    <span class="before">Button</span>
  </button>

  <button type="button" class="button double-door-effect mt48">Button</button>

  <p class="mt48">※ a要素(ページ遷移リンク)とbutton要素(アクショントリガー、またはsubmit)の見た目はそれぞれ変えてください</p>
</main>
/* No context defined. */
  • Content:
    .button-container {
      justify-content: center;
    }
    
    .button {
      display: inline-block;
      position: relative;
      width: 12.5rem;
      height: 4rem;
      margin: auto 1rem 2rem;
      border: 2px solid var(--black);
      text-align: center;
      text-decoration: none;
      transition: all .3s;
    }
    .button:hover, .button:focus {
      background-color: #787878;
      color: var(--white);
      transition: all .3s;
    }
    
    .depth-effect {
      position: relative;
      top: 0;
      border: transparent;
      perspective: 19rem;
      /* hover 3D effect */
    }
    .depth-effect > .after, .depth-effect > .before {
      display: block;
      position: absolute;
      top: 0;
      width: 12.5rem;
      height: 4rem;
      border: 2px solid #074015;
      background-color: #f4dc71;
      text-align: center;
      line-height: 3.5rem;
      color: #b15602;
      transform: rotateX(90deg);
      transition: all .3s;
      transform-origin: 50% 50% -2rem;
    }
    .depth-effect > .before {
      background-color: #96e4a3;
      color: #074015;
      transform: rotateX(0deg);
      transform-origin: 50% 50% -2rem;
    }
    .depth-effect:hover, .depth-effect:focus {
      border-color: transparent;
      background-color: transparent;
      color: transparent;
    }
    .depth-effect:hover > .after, .depth-effect:focus > .after {
      z-index: 3;
      border: 2px solid #b15602;
      transform: rotateX(0deg);
    }
    .depth-effect:hover > .before, .depth-effect:focus > .before {
      transform: rotateX(-90deg);
    }
    
    .double-door-effect {
      z-index: 2;
      border: 2px solid #035ca5;
      color: var(--white);
      /* double-door hover effect  */
    }
    .double-door-effect:before, .double-door-effect:after {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      z-index: -1;
      width: 12rem;
      height: calc(4rem - 4px);
      background-color: #339ee6;
      transition: all .5s;
    }
    .double-door-effect:before {
      left: 0;
    }
    .double-door-effect:after {
      right: 0;
    }
    .double-door-effect:hover, .double-door-effect:focus {
      border-color: #035ca5;
      background-color: var(--white);
      color: #035ca5;
    }
    .double-door-effect:hover:before, .double-door-effect:hover:after, .double-door-effect:focus:before, .double-door-effect:focus:after {
      width: 0;
      background-color: #5cb2eb;
      transition: all .3s;
    }
  • URL: /components/raw/button/style.css
  • Filesystem Path: src/components/4-control/button/style.css
  • Size: 2.1 KB

No notes defined.