CSSだけで作る背景色が斜め方向にでてくるボタンの作り方

2014-07-18 /Development #CSS

この記事は最終更新日から10年以上経過しています。

See the Pen lsaIF by u (@is8r) on CodePen.

こんなの。

作り方

背景色の部分をbefore疑似要素で作成して動かしているだけです。

背景用の要素を作成
背景用の要素にアニメーションをつける

の2ステップで実装可能となっております。

背景用の要素を作成

まずはbefore疑似要素を作成して、背景色を敷いて+skewY(-20deg)でY軸方向にskewをかけます。（+skewYはCompassのMixin）親要素の方にはposition: relativeとoverflow: hiddenを忘れず入れておきましょう。あとbefore疑似要素の方にはz-index: -1を入れておかないと文字の手前に背景色が描画されてしまうので注意が必要です。

&:before
  display: inline-block
  +skewY(-20deg)
  position: absolute
  top: 0
  left: 0
  background-color: #e7d93c
  content: '　'
  width: 100%
  height: 120px
  z-index: -1

アニメーションをつける

あとは背景用の要素の位置を上下に移動させるだけで完成です。

&:before
  +transition(top, 0.3s)
  top: -160px
  &:hover
    &:before
      top: -40px

Mixin作った

簡単に使えるようにMixinにしておきました。

=button-shutter($c: #e7d93c, $c-text: #222)
  +inline-block
  overflow: hidden
  position: relative
  text-decoration: none
  padding: 10px 30px
  font-size: 14px
  color: $c-text
  background-color: transparent
  border: 1px solid $c-text
  max-width: 160px
  &:before
    +inline-block
    +transition(top, 0.3s)
    +skewY(-20deg)
    position: absolute
    top: -160px
    left: 0
    background-color: $c
    content: '　'
    width: 100%
    height: 120px
    z-index: -1
  &:hover
    &:before
      top: -40px

文字数によっては背景が足りなくなるので調整が必要になりそう。

前回のがcodepen上で 2700 もviewがついてたので他にも作ってみた。