柔らかい色を使ったほんわか系CSSボタン集
ほんわか系CSSボタン01
柔らかい色を使ったほんわか系CSSボタンです。
動作サンプル
See the Pen CSS Background color change animation by yochans (@yochans) on CodePen.
サンプルコード
サンプルコードはボタン単体のHTML/CSSにて紹介しています。
動作サンプルにてカラーバリエーション版を確認可能です。
HTML
<p><a href="#" class="button">BUTTON</a></p>CSS
.button{
position: relative;
padding: 10px 10px;
text-decoration: none;
color: #FFF;
border:solid 1px #F48FB1;
font-weight: bold;
}
.button:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color:#F48FB1;
opacity: 0.6;
z-index: -1;
transform: translate(6px, -6px);
transition: transform 0.5s;
}
.button:hover:before{
transform: translate(-0, 0);
opacity: 1;
}ほんわか系CSSボタン02
角丸タイプのほんわか系CSSボタンです。
動作サンプル
See the Pen Soft Design CSS button 02 by yochans (@yochans) on CodePen.
サンプルコード
サンプルコードはボタン単体のHTML/CSSにて紹介しています。
動作サンプルにてカラーバリエーション版を確認可能です。
HTML
<p><a href="#" class="button">BUTTON</a></p>CSS
.button{
position: relative;
padding: 10px 20px;
text-decoration: none;
color: #FFF;
border:solid 1px #F48FB1;
border-radius: 50px;
font-weight: bold;
}
.button:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color:#F48FB1;
border-radius: 50px;
opacity: 0.6;
z-index: -1;
transform: translate(6px, -6px);
transition: transform 0.5s;
}
.button:hover:before{
transform: translate(-0, 0);
opacity: 1;
}ほんわか系CSSボタン03
円形タイプのほんわか系CSSボタンです。
動作サンプル
See the Pen Soft Design CSS button 03 by yochans (@yochans) on CodePen.
サンプルコード
サンプルコードはボタン単体のHTML/CSSにて紹介しています。
動作サンプルにてカラーバリエーション版を確認可能です。
HTML
<p><a href="#"><button class="button"><span>B</span></button></a></p>CSS
.button{
position: relative;
height: 50px;
width: 50px;
background:none;
border:solid 1px #F48FB1;
border-radius: 50%;
}
.button span{
color: #FFF;
text-decoration: none;
font-size:25px;
font-weight: bold;
}
.button:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color:#F48FB1;
border-radius: 50px;
opacity: 0.8;
z-index: -1;
transform: translate(4px, -4px);
transition: transform 0.5s;
}
.button:hover:before{
transform: translate(-0, 0);
opacity: 1;
}ほんわか系CSSボタン04
柔らかい色を使ったほんわか系CSSボタン、01の別バージョンになります。
動作サンプル
See the Pen Soft Design CSS button 04 by yochans (@yochans) on CodePen.
サンプルコード
サンプルコードはボタン単体のHTML/CSSにて紹介しています。
動作サンプルにてカラーバリエーション版を確認可能です。
HTML
<p><a href="#"><button class="button"><span>B</span></button></a></p>CSS
.button{
position: relative;
padding: 10px 20px;
text-decoration: none;
color: #FFF;
font-weight: bold;
}
.button:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color:#F48FB1;
opacity: 1;
z-index: -1;
transition: transform 0.8s;
}
.button:hover:before{
transform: translate(6px, -6px);
opacity: 0.8;
}ほんわか系CSSボタン05
角丸タイプのほんわか系CSSボタン、02の別バージョンになります。
動作サンプル
See the Pen Soft Design CSS button 04 by yochans (@yochans) on CodePen.
サンプルコード
サンプルコードはボタン単体のHTML/CSSにて紹介しています。
動作サンプルにてカラーバリエーション版を確認可能です。
HTML
<p><a href="#" class="button">BUTTON</a></p>CSS
.button{
position: relative;
padding: 10px 20px;
text-decoration: none;
color: #FFF;
border-radius: 50px;
font-weight: bold;
}
.button:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color:#F48FB1;
border-radius: 50px;
opacity: 1;
z-index: -1;
transition: transform 0.8s;
}
.button:hover:before{
transform: translate(0, -6px);
opacity: 0.8;
}ほんわか系CSSボタン06
円形タイプのほんわか系CSSボタン、03の別バージョンになります。フォントアイコンなどでも利用できます。
動作サンプル
See the Pen Soft Design CSS button 06 by yochans (@yochans) on CodePen.
サンプルコード
サンプルコードはボタン単体のHTML/CSSにて紹介しています。
動作サンプルにてカラーバリエーション版を確認可能です。
HTML
<p><a href="#"><button class="button"><span>B</span></button></a></p>CSS
.button{
position: relative;
height: 50px;
width: 50px;
background:none;
border:solid 1px #F48FB1;
border-radius: 50%;
}
.button span{
color: #FFF;
text-decoration: none;
font-size:25px;
font-weight: bold;
}
.button:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color:#F48FB1;
border-radius: 50px;
opacity: 1;
z-index: -1;
transition: transform 0.5s;
}
.button:hover:before{
transform: translate(4px, -4px);
opacity: 0.8;
}