柔らかい色を使ったほんわか系CSSボタン集

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;
}

CSSCSSボタン

Posted by Yousuke.U