朦朧

仕事が終わらない……厳密には、先月納品予定だったものに不幸なことがあり、戻りが来ているという状況。
全体的に直すならデザインが欲しいと返したところ、元請けとクライアントで話し合いをして修正箇所を決めてくれたらしい。よかった、無限修正編は避けられた。
納品物に戻りは付き物だし、クライアントによって事情も違うから仕方ない。
誰も悪くない、より良いものができるならそれでいい……。

それはそうとCSSのボタンデザインを眺めていたら好みのものを見つけた。
https://getcssscan.com/css-buttons-examples

ミソはグラデーションだけで左下の欠けが表現してあることと、グリッジする要素の文字に赤青のシャドウがつけてあること。

<button class="button-49">サンプル</button>

<style>
  /* CSS */
  .button-49 {
    margin: 10px 50px;
    display: block;
  }

  .button-49,
  .button-49::after {
    padding: 10px 30px 8px;
    background: linear-gradient(45deg, transparent 5%, #FF013C 5%);
    border: 0;
    color: #fff;
    box-shadow: 6px 0px 0px #00E6F6;
    position: relative;
  }

  .button-49::after {
    --slice-0: inset(50% 50% 50% 50%);
    --slice-1: inset(80% -6px 0 0);
    --slice-2: inset(50% -6px 30% 0);
    --slice-3: inset(10% -6px 85% 0);
    --slice-4: inset(40% -6px 43% 0);
    --slice-5: inset(80% -6px 5% 0);

    content: "サンプル";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 3%, #00E6F6 3%, #00E6F6 5%, #FF013C 5%);
    text-shadow: -3px -3px 0px #F8F005, 3px 3px 0px #00E6F6;
    clip-path: var(--slice-0);
  }

  .button-49:hover:after {
    animation: 1s glitch;
    animation-timing-function: steps(2, end);
  }

  @keyframes glitch {
    0% {
      clip-path: var(--slice-1);
      transform: translate(-20px, -10px);
    }

    10% {
      clip-path: var(--slice-3);
      transform: translate(10px, 10px);
    }

    20% {
      clip-path: var(--slice-1);
      transform: translate(-10px, 10px);
    }

    30% {
      clip-path: var(--slice-3);
      transform: translate(0px, 5px);
    }

    40% {
      clip-path: var(--slice-2);
      transform: translate(-5px, 0px);
    }

    50% {
      clip-path: var(--slice-3);
      transform: translate(5px, 0px);
    }

    60% {
      clip-path: var(--slice-4);
      transform: translate(5px, 10px);
    }

    70% {
      clip-path: var(--slice-2);
      transform: translate(-10px, 10px);
    }

    80% {
      clip-path: var(--slice-5);
      transform: translate(20px, -10px);
    }

    90% {
      clip-path: var(--slice-1);
      transform: translate(-10px, 0px);
    }

    100% {
      clip-path: var(--slice-1);
      transform: translate(0);
    }
  }
</style>

単純にボタンを斜めにするという発想が無かった(角度によってはジャギーが気になるため)。
文字選択時は背景色のスライドインが合うと思ったので改変している。

<button class="button-53" role="button"><span>サンプル</span></button>

<style>
  /* CSS */
  .button-53 {
    display: block;
    margin: 50px;
    border: 0 solid #E5E7EB;
    padding: 5px 30px;
    font-weight: 700;
    transform: rotate(-2deg);
    position: relative;
  }

  .button-53::before,
  .button-53::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }

  .button-53::after {
    background: #F8F005;
    z-index: -1;
    width: 0;
    transition: .3s cubic-bezier(0.000, 0.800, 0.000, 1.000);
  }

  .button-53::before {
    background-color: #3DD1E7;
    z-index: -2;
  }

  .button-53:hover::after {
    width: 100%;
  }

  .button-53>span::after {
    content: '';
    position: absolute;
    border: 1px solid #000000;
    bottom: 4px;
    left: 4px;
    width: calc(100% - 1px);
    height: calc(100% - 1px);
  }
</style>

これは余談だけど、`WIn + Shift + S`の画面録画はフレームレートが低くて2つ目のアニメーションが上手く録画できなかった。
`WIn + G`のゲームバーから録画したらきちんと撮れたから、ゲームバーって名前だけあってちゃんとしてるなと思った。


いいなと思ったら応援しよう!

NettoNeon
実家暮らしの兎獣人です。