by ryou

FontAweSome + CSSでスタイリッシュな(個人の感想)ボタン

WEBデザインの参考に色々なWEBサイトを見て回っていた所、

中央会計株式会社

こちらのサイト下部にある

このボタンというか画像リンクというかの背景にアイコンが半透明で傾いて配置されてるのが好みで、「これ画像なしで作れるんじゃね?」と思ったので試しに作ってみました。

動作サンプル

GitHub Pages

ソース

今回BEMっぽく書いてみましたが…ちゃんとBEMれてるのかどうか。

HTML(Slim)

.fa-css-btn
  a.fa-css-btn__single href=""
    .fa-css-btn__bg.fa-css-btn__bg--tw
    .fa-css-btn__text
      .fa-css-btn__text-en Twitter
      .fa-css-btn__text-ja ツイッター
  a.fa-css-btn__single href=""
    .fa-css-btn__bg.fa-css-btn__bg--fb
    .fa-css-btn__text
      .fa-css-btn__text-en FaceBook
      .fa-css-btn__text-ja フェイスブック
  a.fa-css-btn__single href=""
    .fa-css-btn__bg.fa-css-btn__bg--gh
    .fa-css-btn__text
      .fa-css-btn__text-en GitHub
      .fa-css-btn__text-ja github

CSS(Compass)

+e,+mはBEMのelement,modifireを定義するためのmixinです。

.fa-css-btn
  margin-top: 100px
  width: 699px
  display: block
  &:after
    +clearfix
  +e(single)
    width: 233px
    float: left
    display: block
    &:hover
      +opacity(0.5)
  +e(bg)
    position: absolute
    z-index: -1
    width: 233px
    height: 100px
    overflow: hidden
    &:after
      position: absolute
      left: 50%
      top: -40%
      color: white
      font-size: 120px
      font-family: FontAwesome
      +rotate(-20deg)
      +opacity(0.5)
    +m(tw)
      background-color: #2980b9
      &:after
        content: ""
    +m(fb)
      background-color: #2c3e50
      &:after
        content: ""
    +m(gh)
      background-color: #16a085
      &:after
        content: ""
  +e(text)
    color: white
    padding: 20px
  +e(text-en)
    +fz-rem(3.0)
    font-weight: bold
  +e(text-ja)
    +fz-rem(1.2)

概要

要はボタンの背景にtransform:rotateでFontAweSomeのアイコンを傾けて半透明にして配置してるだけですね。

以上

記事として書くほどの内容でもなかったのですが、GitHub Pagesを使用してみたかったので書いてみました。