cssで作るあのサイトのあのボタンみたいなボタン - FOXISM
前回の記事で基本的なことは書いたので、次は模倣。いくつかのサイトにある、実際に使われているボタンに似たものを作ってみます。 実際に使うかどうかは別として、cssの練習にはこういうのが良いんじゃないでしょうか。 基本的に、以下のaタグのみのごく簡単なhtmlを使って作っていきます。クラス名や中の言葉は変わっていきます。いろいろ察してください。 <a href="#" class="btn">ボタン</a> また、いつものことですが、使っているテーマなどによっては、そちらのcssが優先されてここでの指定がきかない場合もあります。!important付ければ大抵なんとかなりますが、あまり美しくはないですね。 ではでは、いってみましょー。 Amazon（サインイン） 元となるボタン できたもの css Amazon（アカウントを作成） できたもの css はてなブログ（写真を投稿） 元となるボタン
cssによるボタンデザインの備忘録 - FOXISM
a.btn{ display: inline-block; /* インラインブロック化 */ padding: 1em 2em; /* 余白設定 */ line-height: 1; /* 行の高さ */ color: #fff; background-color: #2196f3; text-decoration: none; } a.btn:hover{ background-color: #42a5f5; } point paddingの値を上下1em、左右2emくらいにすると、フラットデザインっぽくなる。ここまで広げなくてもいいけど、狭いとダサくなるので、それなりに余裕ある数値にするといい感じ。 角丸に demo ボタンリンク a.btn{ display: inline-block; padding: 1em 2em; line-height: 1; color: #fff; b
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
