タグ

2017年4月26日のブックマーク (2件)

  • CSSで作る!押したくなるボタンデザイン100(Web用)

    .btn-square { display: inline-block; padding: 0.5em 1em; text-decoration: none; background: #668ad8;/*ボタン色*/ color: #FFF; border-bottom: solid 4px #627295; border-radius: 3px; } .btn-square:active { /*ボタンを押したとき*/ -webkit-transform: translateY(4px); transform: translateY(4px);/*下に動く*/ border-bottom: none;/*線を消す*/ }

    CSSで作る!押したくなるボタンデザイン100(Web用)
    kozura
    kozura 2017/04/26
    使えそうですね!
  • cssで作るシェアボタンのデザインパターン36種類 - FOXISM

    cssで作るシェアボタンのデザインパターンをたくさん考えてみました。とりあえずシェア数の表示がない、単純なボタンとして36種類あります。(色違いなども若干含みます。) 記述するhtmlはどれも同じようなものですが、一部微妙に異なるものもあります。基的にはcssだけでデザインを決めています。アイコンフォントに関してもcssだけでほとんどやっていますが、そのコードは省略していますのでソースを見てください。 コピペでもだいたい使えると思いますが、それぞれ微調整が必要なものもあると思います。なのでコピペだけでなく自分のサイトに合わせて調整できるcss中級者以上向けですね。スマホ表示も考えてないし。(スマホで見ると崩れてるやんwと思う人はこの記事の対象外です。) というか、ローカルなhtmlで作っていたものをここにコピペしたらうまく動かないものやフォントが反映されていないものがありました。面倒なの

    cssで作るシェアボタンのデザインパターン36種類 - FOXISM
    kozura
    kozura 2017/04/26
    つかえそうですね。