CSSだけでいろんな動きのアニメーションボタン｜nobee

update:2020.5.29　Last updated:2020.6.5　951view

CSSだけでいろんな動きのアニメーションボタン

CSSだけでいろんな動きのアニメーションボタン

cssでボタンを作成

どこでも良く見かける普通のボタンを作成します。

ここをクリック！

html

<p><a href="#" class="click_btn"></a></p>

クラス名を「click_btn」にしました。cssのコードはこちらです。

.click_btn{
  background: #2da1e9;
  border-radius: 5px;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  padding: 8px 0;
  margin: 0 auto;
  text-align: center;
  width: 50%;
}

これをベースにいろんな動きのあるボタンを作成してみました。

ボタンその1 ぼよ～んぼよ～ん

ここをクリック！

html

<p><a href="#" class="click_btn anime01"></a></p>

anime01というクラス名を付与。anime01のcssコード

.anime01{
  animation: pouding1 .5s linear infinite alternate;
}

@keyframes pouding1{
  0%{ transform: scale(1.5); }
  100%{ transform: scale(1); }
}

ボタンその2　跳ねてる感じ

ここをクリック！

html

<p><a href="#" class="click_btn anime02"></a></p>

anime02というクラス名を付与。anime02のcssコード

.anime02{
  animation: pouding2 0.3s alternate infinite;
}

@keyframes pouding2{
  0% {transform: translateY(0px);}
  100% {transform: translateY(-12px);}
}

ボタンその3　キラッと光る

ここをクリック！

anime03というクラス名を付与。anime03のcssコード

.anime03{
  overflow: hidden;
  position: relative;
}

.anime03::before{
  content: '';
  background-color: #fff;
  animation: kira 3s ease-in-out infinite;
  position: absolute;
  top: -180px;
  left: 0;
  opacity: 0;
  transform: rotate(45deg);
  width: 25px;
  height: 100%;
}

@keyframes kira{
  0%{
    transform: scale(0) rotate(45deg);
    opacity: 0;
  }

  80%{
    transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }

  81%{
    transform: scale(4) rotate(45deg);
    opacity: 1;
  }

  100%{
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}

人気記事