CSSデザイン一覧
このページでは様々なサイトでよく使われるパーツのCSSデザインを紹介しています。ボタンをクリックすることで、CSSの記述を確認することができます。記載のコードはコピーしてご自由にお使いください。
※随時追加予定です。
※ご使用の環境やスタイルによって、一部スタイルが反映されない場合がございます。自身の環境に合わせて変更してください。
ボタンデザイン
ボタンの基本的なスタイルから、ホバー時のアニメーションを付けたものまで紹介しています。
- ベタ塗りボタン×
HTMLコード
<a class="btn02" href="#">ベタ塗りボタン</a>CSSコード
.btn02{
font-size:15px;
font-weight:700;
text-decoration:none;
text-align:center;
padding:10px 0;
color:#fff;
background:#00a63c;
display:block;
} - 枠線ボタン×
HTMLコード
<a class="btn01" href="#">枠線ボタン</a>CSSコード
.btn01{
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;
} - 破線ボタン×
HTMLコード
<a class="btn03" href="#">破線ボタン</a>CSSコード
.btn03{
font-size:15px;
font-weight:700;
text-decoration:none;
text-align:center;
padding:10px 0;
color:#00a63c;
border:2px dashed #00a63c;
box-sizing:border-box;
display:block;
} - 枠線→ベタ塗りボタン×
HTMLコード
<a class="btn04" href="#">枠線→ベタ塗りボタン</a>CSSコード
.btn04{
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;
transition:all 0.3s;
}
.btn04:hover{
background:#00a63c;
color:#fff;
} - 伸縮ボタン×
HTMLコード
<a class="btn05" href="#">伸縮ボタン</a>CSSコード
.btn05{
font-size:15px;
font-weight:700;
text-decoration:none;
text-align:center;
padding:10px 0;
margin:0 auto;
color:#00a63c;
border:2px solid #00a63c;
box-sizing:border-box;
display:block;
transition:all 0.3s;
width:80%;
}
.btn05:hover{
width:100%;
} - 色が変わるボタン×
HTMLコード
<a class="btn06" href="#">色が変わるボタン</a>CSSコード
.btn06{
font-size:15px;
font-weight:700;
text-decoration:none;
text-align:center;
padding:10px 0;
color:#fff;
background:#00a63c;
display:block;
transition:all 0.3s;
}
.btn06:hover{
background:#5abee9;
}