スタイル一覧

このページでは様々なサイトでよく使われるパーツの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;
}

ホバーで半透明に変化