【CSS】ボタンデザイン サンプル

← このような送信ボタンではなく、リンクをスマートフォンで使いやすいようにボタン化したデザインです。

HTMLとCSSでデザインされたボタンのサンプルです。ホームページ作りにご利用ください。

にも応用できますが、若干のCSS知識が必要になります。

基本HTML

<a href="#" class="btn">BUTTON</a>

基本になるHTMLです。

必要に応じてclass="btn"は変更してご利用ください。

共通CSSをみてみる 
a.btn{
  text-decoration:none;	/*リンク下線を消す*/
}

下で紹介するボタンの共通CSSです。

管理画面内の貼り付ける場所

CSS
管理画面のHEAD間編集かCSS編集へコピペしてください。
HTML
管理画面の編集枠へコピペしてください。
HEAD間編集に記述する際は <style> と </style> の中に書いてください。CSS編集に記述する場合は <style> と </style> は書いてはダメです。

分からないことは「ユーザー助け合い掲示板」で聞いてみよう

それではデザインサンプルをご覧ください。

BUTTON
コードを見てみる

CSS

a.btn{
  color:#3498db;
  border:2px solid #3498db;
  border-radius:8px;
  padding:12px 36px;
}
BUTTON
コードを見てみる

CSS

a.btn{
  color:#fff;
  background:#3498db;
  border-radius:8px;
  padding:12px 36px;
}
BUTTON
コードを見てみる

CSS

a.btn{
  color:#fff;
  background:#3498db;
  border-radius:40px;
  padding:12px 36px;
}
BUTTON
コードを見てみる

CSS

a.btn{
  color:#fff;
  background:#3498db;
  border-radius:50%;
  width:140px;
  height:140px;
  line-height:140px;
  text-align:center;
  display:inline-block;
}
BUTTON
コードを見てみる

CSS

a.btn{
  color:#fff;
  background:#3498db;
  border-radius:8px;
  padding:12px 36px;
  box-shadow:0 2px 4px rgba(0,0,0,0.3);
}
BUTTON
コードを見てみる

CSS

a.btn{
  color:#fff;
  background:#3498db;
  border-radius:4px;
  padding:12px 36px;
  box-shadow:6px 6px rgba(41,121,175,1);
}
BUTTON
コードを見てみる

CSS

a.btn{
  color:#3498db;
  border:2px solid #3498db;
  border-radius:4px;
  padding:12px 36px;
  box-shadow:6px 6px rgba(41,121,175,1);
}
BUTTON
コードを見てみる

CSS

a.btn{
  color:#fff;
  background:#3498db;
  background-image:linear-gradient(to bottom, #2e88c5 0%, #99cbed 100%);
  background-image:-webkit-linear-gradient(93deg, #99cbed 0%, #2e88c5 100%);
  border-radius:4px;
  padding:12px 36px;
}
BUTTON
コードを見てみる

CSS

a.btn{
  color:#fff;
  background:#3498db;
  border:1px dashed #eaf4fb;
  border-radius:6px;
  box-shadow:0 0 0 6px #3498db;
  width:180px;
  height:60px;
  line-height:60px;
  text-align:center;
  display:inline-block;
}
BUTTON
コードを見てみる

CSS

a.btn{
  color:#666;
  background:#eee;
  background:-moz-linear-gradient(top, #fff 0%, #eee);
  background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
  border:1px solid #ddd;
  padding:12px 36px;
}