スタイル一覧
このページでは様々なサイトでよく使われるパーツのCSSスタイルを紹介しています。ボタンをクリックすることで、CSSの記述を確認することができます。記載のコードはコピーしてご自由にお使いください。
※ご使用の環境やスタイルによって、一部スタイルが反映されない場合がございます。自身の環境に合わせて変更してください。
ボタンスタイル
ボタンの基本的なスタイルから、ホバー時のアニメーションを付けたものまで紹介しています。
- 枠線ボタン×.btn{font-size:15px;
font-weight:700;
text-decoration:none;
text-align:center;
padding:10px 0;
color:#00a63c;
border:2px solid #00a63c;
box-sizing:border-box;
display:block;} - 背景ベタ塗り×
.btn{
font-size:15px;
font-weight:700;
text-decoration:none;
text-align:center;
padding:10px 0;
background:#00a63c;
color:#fff;
box-sizing:border-box;
display:block;
} - 角丸ボタン×
.btn{
font-size:15px;
font-weight:700;
text-decoration:none;
text-align:center;
padding:10px 0;
background:#00a63c;
color:#fff;
border-radius:5px;
box-sizing:border-box;
display:block;
} - ホバーで色反転×
.btn{
font-size:15px;
font-weight:700;
text-decoration:none;
text-align:center;
padding:10px 0;
background:#fff;
color:#00a63c;
border-radius:5px;
box-sizing:border-box;
display:block;
transition:all 0.5s;
}
.btn:hover{
background:#00a63c;
color:#fff;
} - ホバーで角丸に変化×
.btn{
font-size:15px;
font-weight:700;
text-decoration:none;
text-align:center;
padding:10px 0;
background:#fff;
color:#00a63c;
box-sizing:border-box;
display:block;
transition:all 0.5s;
}
.btn:hover{
border-radius:50px;
} - ホバーで破線に変化×
.btn{
font-size:15px;
font-weight:700;
text-decoration:none;
text-align:center;
padding:10px 0;
background:#fff;
color:#00a63c;
border:2px solid #00a63c;
box-sizing:border-box;
display:block;
}
.btn:hover{
border:2px dashed #00a63c;
} - ホバーで色が変化×
.btn{
font-size:15px;
font-weight:700;
text-decoration:none;
text-align:center;
padding:10px 0;
background:#00a63c;
color:#fff;
box-sizing:border-box;
display:block;
transition:all 0.5s;
}
.btn:hover{
background:#a1bf13
} - ホバーで半透明に変化×
.btn{
font-size:15px;
font-weight:700;
text-decoration:none;
text-align:center;
padding:10px 0;
background:#00a63c;
color:#fff;
box-sizing:border-box;
display:block;
transition:all 0.5s;
opacity:1;
}
.btn:hover{
background:#a1bf13
opacity.0.5;
}