タグ

2018年3月7日のブックマーク (2件)

  • CSSで作るシンプルな矢印アイコン29個 | 株式会社プレスマン

    最近ではCSS3の対応ブラウザが増えたおかげで、画像を使わずともサイト上で色々な表現ができるようになりました。 CSSでデザインの実装を行う場合、「カスタマイズやメンテナンスが容易」「レスポンシブWebデザインとも相性が良い」「画像を読み込まないのでモバイルユーザーにも優しい」「Retinaディスプレイなど高解像度の環境で見ても綺麗」等、制作側とユーザーの両方にメリットがあります。 今回は、フラットデザインのWebサイトなどでよく見かける、シンプルな矢印アイコンのCSSをいくつかご紹介したいと思います。 目次: 共通HTMLCSS シンプルな矢印アイコン シンプルな矢印アイコン シンプルな矢印アイコン(大) シンプルな太い矢印アイコン シンプルな太い矢印アイコン(大) 斜めの矢印アイコン 右上向きの矢印アイコン 右上向きの矢印アイコン(大) 右下向きの矢印アイコン 右下向きの矢印アイコン

    CSSで作るシンプルな矢印アイコン29個 | 株式会社プレスマン
    taxytaxy
    taxytaxy 2018/03/07
    “.sample4-2::before{ width: 12px; height: 12px; -webkit-border-radius: 50%; border-radius: 50%; background: #7a0; } .sample4-2::after{ left: 5px; box-sizing: border-box; width: 3px; height: 3px; border: 3px solid transparent; border-left: 3px solid #fff; }”
  • コピペでできるCSSボタンマウスオーバーエフェクト集 | aekana

    CSSで表現できるボタンのマウスオーバーのエフェクトをまとめました。 ボタンのデザインを充実させるとクリック率・コンバージョン率アップにも繋がります。 そのままコピー&ペーストできますので、時間短縮にぜひご活用ください。 ※デモはPC環境でご覧ください 2018/8 CSSボタンデザイン記事を追加しました。 コピペでできる立体的なCSSボタンデザイン集 CSSだけで表現できる押したくなるボタンリスト 1. ボタン基形 まずはボタン基形です。.btnに共通のCSS、.btn+連番にオリジナルのCSSを記述します。 フォントの大きさや種類は適宜変更してください。 !importantは当サイトに合わせた記述ですので、基的に外してください。 <a href="" class="btn btn01">HOVER</a> .btn { padding: 15px 70px; font-weig

    コピペでできるCSSボタンマウスオーバーエフェクト集 | aekana
    taxytaxy
    taxytaxy 2018/03/07
    “.btn10 { background-color: #3169d1; color: #fff !important; margin: 0 0 10px 0; box-shadow: 0 5px #3B4BA8;}.btn10:hover { -ms-transform: translateY(5px); -webkit-transform: translateY(5px); transform: translateY(5px); border-bottom: none; box-shadow: none;}”