自分だけのマイCSSフレームワークをつくる(ボタン編)

自分だけのマイCSSフレームワークをつくることを目指してやっていきます。
今日は、ボタンのパーツをつくります。
最近のサイトはボタンのデザインや動作に凝っていて、つい押してしまいたくなるものが多いですよね。
今回は、シンプルなボタンを4種類用意してみました。

基本となるボタンパーツのHTML

HTML
<a href="#" class="button">ボタン</a>

ボタンパーツのCSSの設定

4種類のボタンのスタイルを用意しました。

シンプルなフラットのボタン

style.css
.button {
  display: inline-block;
  padding: 10px 30px;
  border: solid 2px #ddd;
  border-radius: 6px;
  background-image: none;
  background-color: #fff;
  color: #333;
  font-family: inherit;
  font-size: 1.4rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.button:hover,
.button:focus {
  outline: none;
  background-image: linear-gradient(rgba(255,255,255.2), rgba(255,255,255.2));
}

背景にグラデーションをかけたボタン

style.css
.button {
  display: inline-block;
  padding: 10px 30px;
  border: solid 2px #ddd;
  border-radius: 6px;
  background-image: none;
  background: linear-gradient(to bottom, #fff 0%, #fff 80%, #eee 100%);  
  color: #333;
  font-family: inherit;
  font-size: 1.4rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.button:hover,
.button:focus {
  outline: none;
  background-image: linear-gradient(rgba(255,255,255.3), rgba(255,255,255.3));
}

立体的にみえるボタン

style.css
.button {
  display: inline-block;
  padding: 10px 30px;
  border-top: none;
  border-left: none;
  border-right: solid 1px rgba(0,0,0,0.3);
  border-bottom: solid 2px rgba(0,0,0,0.3);
  border-radius: 6px;
  background-image: none;
  background-color: #fff;
  color: #333;
  font-family: inherit;
  font-size: 1.4rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.button:hover,
.button:focus {
  outline: none;
  background-image: linear-gradient(rgba(255,255,255.2), rgba(255,255,255.2));
  opacity: 0.8;
  transition: border .1s;
  border-right: solid 1px rgba(0,0,0,0.2);
  border-bottom: solid 2px rgba(0,0,0,0.2);
}

横長の丸みを帯びたボタン

style.css
.button {
  display: inline-block;
  padding: 5px 50px;  
  border: solid 2px #ddd;
  border-radius: 18px;
  background-image: none;
  background-color: #fff;
  color: #333;
  font-family: inherit;
  font-size: 1.4rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.button:hover,
.button:focus {
  outline: none;
  background-image: linear-gradient(rgba(255,255,255.2), rgba(255,255,255.2));
}

もっとホバーしたときなどにアニメーションなど効果を追加して、ボタンを押すのが楽しくなるようにデザインするのも良さそうですね。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です