保存版！CSS3でイケてるボタンデザインに変化させる方法
サイト内で多用するボタン、色々なタイプのボタンを用意しなければいけない場合もあると思います。このページでは数分で完成するボタンデザインを幾つか紹介したいと思います。
基本となるHTMLとCSS
ボタンは色々な所で多く使われます。HTMLとCSSをボタン用に統一しておくと、様々なボタンデザインが可能になるのでとても便利です。まずはベースとなるHTMLとCSSを作成します。
HTML
デザインの種類が多くなるので、どのボタンにも共通で使う「.btn」クラスを作成します。アニメーションやエフェクトをつけるときに便利なので「a」タグに「position:relative;」を指定します。「span」タグには「btn-text」クラスをつけてテキストに関するスタイルを指定します。
BUTTON
CSS
CSSは以下のようなスタイルで設定しますが、「width」や「height」で大きさを各自で変更してもいいと思います。
※今回、サンプルのCSSにはベンダープレフィックスは記載していません。
.btn{
display:inline-block;
position:relative;
text-decoration:none;
cursor:pointer;
border: 2px solid #000000;
overflow: hidden;
text-align: center;
}
.btn-style{
width:170px;
height:45px;
line-height:45px;
}
.btn-text{
color: #000000;
position: relative;
z-index: 2;
font-weight: bold;
}
目次
- 角を丸くする
- 背景カラーを変更するアニメーション
- 背景・ボーダー・文字を変更するアニメーション
- ボーダーのスタイルを破線に変更するアニメーション
- 背景を上から下に塗りつぶすアニメーション
- 背景を左から右に塗りつぶすアニメーション
- 背景を透過させるアニメーション
1. 角を丸くする
簡単なデザインで「border-radius」を使って角丸ボタンを作ります。
「border-radius」にpx指定すると各角ができます。今回は4つのコーナーの角丸をまとめて指定してます。
.btn-radius1{
border-radius:5px;
}
2. 背景カラーを変更するアニメーション
よく使われるアニメーション一つでhover時に背景色が変化するアニメーション。background-colorで変化させたい背景色を指定して、transitionを使って時間的変化を指定します。
.btn-hover01{
background-color:#333333;
transition:all 0.3s;
border:#333333 2px solid;
}
.btn-hover01 .btn-text{
color:#fff;
transition:all 0.3s;
}
.btn-hover01:hover{
background-color:#ffd700;
transition:all 0.3s;
border:#ffd700 2px solid;
}
.btn-hover01:hover .btn-text{
color:#fff;
transition:all 0.3s;
}
3. 背景・ボーダー・文字を変更するアニメーション
hover時に背景とボーダーと文字を変更させるアニメーション。
.btn-hover02{
background-color:#333333;
transition:all 0.3s;
border:#333333 2px solid;
}
.btn-hover02 .btn-text{
color:#fff;
transition:all 0.3s;
}
.btn-hover02:hover{
background-color:#fff;
transition:all 0.3s;
border:#ffd700 2px solid;
}
.btn-hover02:hover .btn-text{
color:#ffd700;
transition:all 0.3s;
}
4. ボーダーのスタイルを破線に変更するアニメーション
hover時にborderプロパティをdashedに指定すると破線になります。
.btn-hover03{
background-color:#fff;
transition:all 0.3s;
border:#333 2px solid;
}
.btn-hover03 .btn-text{
color:#333;
}
.btn-hover03:hover{
background-color:#fff;
transition:all 0.3s;
border:#333 2px dashed;
}
.btn-hover03:hover .btn-text{
color:#333;
}
5. 背景を上から下に塗りつぶすアニメーション
背景が上から下に塗りつぶされるアニメーション。「position:relative;」を指定するので「.btn」ではなく「.btn2」を追加します。他に「.btn-child」というクラスを持った「<span>」を追加します。
「.btn-child」には「position:absolute;」を指定します。「.btn-child」の通常時に「width:100%;」「height:0;」で配置し、hover時に「height:100%;」にすると上から下に塗りつぶされます。
BUTTON
.btn2{
position:relative;
overflow:hidden;
display:inline-block;
text-decoration:none;
cursor:pointer;
border: 2px solid #333;
text-align: center;
}
.btn2 .btn-child{
position:absolute;
top:0;
left:0;
}
.btn-hover04 .btn-child{
background-color:#333;
width:100%;
height:0;
transition:all 0.3s;
}
.btn-hover04 .btn-text{
color:#333;
}
.btn-hover04:hover .btn-text{
color:#fff;
transition:all 0.3s;
}
.btn-hover04:hover .btn-bg{
height:100%;
transition:all 0.3s;
}
6. 背景を左から右に塗りつぶすアニメーション
左から右に塗りつぶすアニメーション。「.btn」ではなく「.btn2」を追加します。他に「.btn-child」というクラスを持った「<span>」を追加します。
「.btn-child」には「position:absolute;」を指定します。「.btn-child」の通常時に「width:0%;」「height:100%;」で配置し、hover時に「width:100%;」にすると左から右に塗りつぶされます。
BUTTON
.btn2{
position:relative;
overflow:hidden;
display:inline-block;
text-decoration:none;
cursor:pointer;
border: 2px solid #333;
text-align: center;
}
.btn2 .btn-child{
position:absolute;
top:0;
left:0;
}
.btn-hover05 .btn-child{
background-color:#333;
width:0%;
height:100%;
transition:all 0.3s;
}
.btn-hover05 .btn-text{
color:#333;
}
.btn-hover05:hover .btn-text{
color:#fff;
transition:all 0.3s;
}
.btn-hover05:hover .btn-child{
width:100%;
transition:all 0.3s;
}
7. 背景を透過させるアニメーション
最も簡単で最も使われているアニメーション。通常時に「opacity:1;」を指定し、hover時に「opacity」を少し下げることで透過させることができます。
.btn-hover06{
opacity:1;
transition:all 0.3s;
}
.btn-hover06:hover{
opacity:0.7;
transition:all 0.3s;
}
まとめ
いかがでしたか？今回は簡単にできるものを紹介しました。一昔前、ボタンをデザインする時はフォトショップで画像を作り、Javaを使ってロールオーバー指定をしていましたが、今じゃCSS3が主流になり、簡単にボタンデザインができるようになりました。
このボタンデザインのサンプルですが、時間がないときはコピー＆ペーストで利用してもいいと思います。このサンプルが多くの人に役立てば幸いです。
