CSSボタン【サンプル集】コピペOKのデザインまとめ
ベーシック
コードを見る
<a href="" class="btn_basic">ベーシック</a>
.btn_basic{
text-decoration: none;
display: inline-block;
width: 100%;
max-width: 300px;
padding: 1em 0;
text-align: center;
border-radius: 1.8em;
color: #fff;
background-color: #DF5E5E;
}
コードを見る
<a href="" class="btn_sbasic">ベーシック・四角</a>
.btn_sbasic{
text-decoration: none;
display: inline-block;
width: 100%;
max-width: 300px;
padding: 1em 0;
text-align: center;
color: #fff;
background-color: #DF5E5E;
}
グラデーション
コードを見る
<a href="" class="btn_gradation">グラデーション</a>
.btn_gradation{
text-decoration: none;
display: inline-block;
width: 100%;
max-width: 300px;
padding: 1em 0;
text-align: center;
border-radius: 1.5em;
color: #fff;
background-image: linear-gradient( 68.3deg, rgba(245,177,97,1) 0.4%, rgba(236,54,110,1) 100.2% );
}
コードを見る
<a href="" class="btn_sgradation">グラデーション四角</a>
.btn_sgradation{
text-decoration: none;
display: inline-block;
width: 100%;
max-width: 300px;
padding: 1em 0;
text-align: center;
color: #fff;
background-image: linear-gradient( 68.3deg, rgba(245,177,97,1) 0.4%, rgba(236,54,110,1) 100.2% );
}
コードを見る
<a href="" class="btn_gradation2">グラデーション別ver.</a>
.btn_gradation2{
text-decoration: none;
position: relative;
display: inline-block;
width: 100%;
z-index: 1;
max-width: 300px;
padding: 1em 0;
text-align: center;
background: linear-gradient( 68.3deg, rgba(245,177,97,1) 0.4%, rgba(236,54,110,1) 100.2% );
border-radius: 1.5em;
}
.btn_gradation2::before{
content: "";
position:absolute;
top:0;
left:0;
z-index: -1;
box-sizing: border-box;
border-radius: 1.5em;
padding: 4px;
width: 100%;
height: 100%;
background: #fff;
background-clip: content-box;
}
コードを見る
<a href="" class="btn_sgradation2">グラデ別ver.四角</a>
.btn_sgradation2{
text-decoration: none;
display: inline-block;
width: 100%;
max-width: 300px;
padding: 1em 0;
text-align: center;
color: #EC366E;
border: 4px solid #EC366E;
border-image: linear-gradient( 68.3deg, rgba(245,177,97,1) 0.4%, rgba(236,54,110,1) 100.2% );
border-image-slice: 1;
}
二重線
コードを見る
<a href="" class="btn_wline">二重線</a>
.btn_wline{
text-decoration: none;
display: inline-block;
width: 100%;
max-width: 282px;
margin: 9px;
padding: 8px 0;
text-align: center;
box-shadow: 0 0 0 3px #DF5E5E, 0 0 0 6px #fff, 0 0 0 9px #DF5E5E;
border-radius: 1.5em;
color: #DF5E5E;
box-sizing: border-box;
}
コードを見る
<a href="" class="btn_swline">二重線・四角</a>
.btn_swline{
text-decoration: none;
display: inline-block;
width: 100%;
max-width: 282px;
margin: 9px;
padding: 8px 0;
text-align: center;
box-shadow: 0 0 0 4px #B089E0, 0 0 0 6px #fff, 0 0 0 8px #B089E0;
color: #945FD5;
box-sizing: border-box;
}
コードを見る
<a href="" class="btn_wline2">二重線別ver.</a>
.btn_wline2{
text-decoration: none;
display: inline-block;
width: 100%;
max-width: 292px;
margin: 4px;
padding: 13px 0;
text-align: center;
box-shadow: 0 0 0 1px #fff, 0 0 0 4px #DF5E5E;
border-radius: 1.5em;
color: #FFFFFF;
background-color: #DF5E5E;
box-sizing: border-box;
}
コードを見る
<a href="" class="btn_swline2">二重線別ver.四角</a>
.btn_swline2{
text-decoration: none;
display: inline-block;
width: 100%;
max-width: 292px;
margin: 4px;
padding: 13px 0;
text-align: center;
box-shadow: 0 0 0 1px #fff, 0 0 0 5px #B089E0;
color: #FFFFFF;
background-color: #B089E0;
box-sizing: border-box;
}
コードを見る
<a href="" class="btn_wline3">二重線別ver.</a>
.btn_wline3{
text-decoration: none;
display: inline-block;
position: relative;
width: 100%;
max-width: 300px;
padding: 21px 0 13px;
text-align: center;
border: solid 4px #DF5E5E;
box-sizing: border-box;
}
.btn_wline3::before{
content: "";
position: absolute;
top: 4px;
bottom: -12px;
right: -15px;
left: 7px;
border: solid 4px #DF5E5E;
}
破線
コードを見る
<a href="" class="btn_dashedline2">破線</a>
.btn_dashedline2{
text-decoration: none;
display: inline-block;
width: 100%;
max-width: 300px;
padding: 13px 0;
text-align: center;
border-radius: 1.5em;
border: dashed 4px #DF5E5E;
box-sizing: border-box;
}
コードを見る
<a href="" class="btn_sdashedline2">破線・四角</a>
.btn_sdashedline2{
text-decoration: none;
display: inline-block;
width: 100%;
max-width: 300px;
padding: 13px 0;
text-align: center;
color: #945FD5;
border: dashed 4px #B089E0;
box-sizing: border-box;
}
コードを見る
<a href="" class="btn_dashedline">破線別ver.</a>
.btn_sdashedline{
text-decoration: none;
display: inline-block;
width: 100%;
max-width: 290px;
margin: 5px;
padding: 12px 0;
text-align: center;
box-shadow: 0 0 0 5px #B089E0;
border: dashed 2px #fff;
color: #FFFFFF;
background-color: #B089E0;
box-sizing: border-box;
}
コードを見る
<a href="" class="btn_sdashedline">破線別ver.四角</a>
.btn_sdashedline{
text-decoration: none;
display: inline-block;
width: 100%;
max-width: 290px;
margin: 5px;
padding: 12px 0;
text-align: center;
box-shadow: 0 0 0 5px #B089E0;
border: dashed 2px #fff;
color: #FFFFFF;
background-color: #B089E0;
box-sizing: border-box;
}
点線
コードを見る
<a href="" class="btn_dottedline">点線</a>
.btn_dottedline{
text-decoration: none;
display: inline-block;
width: 100%;
max-width: 300px;
padding: 12px 0;
text-align: center;
border-radius: 1.5em;
border: dotted 5px #DF5E5E;
box-sizing: border-box;
color: #DF5E5E;
font-weight: bold;
}
コードを見る
<a href="" class="btn_sdottedline">点線・四角</a>
.btn_sdottedline{
text-decoration: none;
display: inline-block;
width: 100%;
max-width: 300px;
padding: 12px 0;
text-align: center;
border: dotted 5px #B089E0;
box-sizing: border-box;
color: #945FD5;
font-weight: bold;
}
シャドウ
コードを見る
<a href="" class="btn_shadow">シャドウ</a>
.btn_shadow{
text-decoration: none;
display: inline-block;
width: 100%;
max-width: 300px;
margin: 4px;
padding: 1em 0;
text-align: center;
box-shadow: 4px 4px 8px 0px rgba(195,136,65,0.6);
border-radius: 1.8em;
color: #FFFFFF;
background-color: #DF5E5E;
}
コードを見る
<a href="" class="btn_sshadow">シャドウ・四角</a>
.btn_sshadow{
text-decoration: none;
display: inline-block;
width: 100%;
max-width: 300px;
margin: 4px;
padding: 1em 0;
text-align: center;
border: 1px solid #D1BCED;
box-shadow: 4px 4px 8px 0px rgba(194,165,231,0.5);
color: #945FD5;
}
