【商用利用可能】コピペで使えるCSSアニメーションボタンのサンプル5点

【商用利用可能】コピペで使えるCSSアニメーションボタンのサンプル5点

コピペで使える商用利用可能なシンプルなCSSアニメーションボタンを5点配布いたします。マウスホバーで下線が表示されたり、border-radiusで角丸になるアニメーションなど、使い勝手の良いスタンダードなデザインです。コードはコピペだけではなく、ZIPファイルでもサンプルをダウンロードできるので、気に入られた方はお気軽にご利用ください。

サンプル

Button1
Button2
Button3
Button4
Button5

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
  <div class="button button1">Button1</div>
  <div class="button button2">Button2</div>
  <div class="button button3">Button3</div>
  <div class="button button4">Button4</div>
  <div class="button button5">Button5</div>
</div>
</body>
</html>

CSS

/* 共通部分 */
.button {
  margin: 20px;
  padding: 20px;
  border: 2px solid #F87B99;
  background: #ffffff;
  color:#000000;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: 0.3s;
  width: 200px;
}
.button:after {
  position: absolute;
  transition: 0.3s;
  content: '';
  width: 0;
  bottom: 0;
  height: 3px;
  background: #F87B99;
}
.button:hover {
  cursor: pointer;
}

/* ボタン1 */
.button1:after {
  left: 50%;
}
.button1:hover:after {
  width: 100%;
  left: 0;
}

/* ボタン2 */
.button2:after {
  left: 0;
}
.button2:hover:after {
  width: 100%;
  left: 0;
}

/* ボタン3 */
.button3:after {
  right: 0;
  left: auto;
}
.button3:hover:after {
  width: 100%;
  left: 0;
}

/* ボタン4 */
.button4:after {
  left: 0;
  bottom: auto;
  top: -3px;
  width: 100%;
}
.button4:hover:after {
  top: calc(100% - 3px);
}

/* ボタン5 */
.button5:hover {
  border-radius: 30px;
}
.button5:hover:after {
  width: 0%;
}

ZIPダウンロード

コピペが面倒な方に向けてZIPファイルもDLできるようにしました。下記のリンクからサンプルをDLしてご利用ください。

ZIPファイルをダウンロードする

コメントを残す

メールアドレスが公開されることはありません。