CSSだけでうねうねスライムリンクボタンを作ってみる

2018年2月19日2019年6月12日CSS,CSSデザイン,CSSアニメーション

CSSの「border-radius」と「animation」を使って、うねうね動くスライムリンクボタンをCSSだけで作ってみたい

1. うねうね動くスライムリンクボタンv1
2. うねうね動くスライムリンクボタンv2

うねうね動くスライムリンクボタンv1

なるほど。

うーん、そもそもborder-radiusが苦手だったです

上手な動きが作れない＞＜

ソースコードを表示

<a class="slime1" href="https://naruhodo.repop.jp/">なるほど。</a>.slime1{
  text-decoration:none;
  color:#FFF;
  display:flex;
  width:120px;
  height:120px;
  justify-content: center;
  align-items:center;
  background: rgba(2,136,209,0.7);
  border-radius: 40% 60% 50% 40%/40% 40% 60% 60%;
  animation: anime 7s linear infinite;
}

@keyframes anime{
  0% {border-radius: 40% 60% 50% 40%/40% 40% 60% 60%;}
  25% {border-radius: 70% 40% 80% 80%/60% 80% 40% 30%;}
  50% {border-radius: 40% 50% 50% 40%/80% 40% 20% 70%;}
  75% {border-radius: 80% 50% 70% 90%/40% 60% 70% 40%;}
  100% {border-radius: 40% 60% 50% 40%/40% 40% 60% 60%;}
}

うねうね動くスライムリンクボタンv2

なるほど。

マウスホバーで透過度を変更してみました色を変えた方がおしゃれなのかな

ソースコードを表示

<a class="slime2" href="https://naruhodo.repop.jp/">なるほど。</a>.slime2{
  color:#FFF;
  display:flex;
  width:120px;
  height:120px;
  justify-content: center;
  align-items:center;
  background: rgba(2,136,209,0.7);
  border-radius: 40% 60% 50% 40%/40% 40% 60% 60%;
  animation: anime 7s linear infinite;
  transition: 1s;
}

.slime2:hover{
  background: rgba(2,136,209,1);
  transition: 1s;
}

@keyframes anime{
  0% {border-radius: 40% 60% 50% 40%/40% 40% 60% 60%;}
  25% {border-radius: 70% 40% 80% 80%/60% 80% 40% 30%;}
  50% {border-radius: 40% 50% 50% 40%/80% 40% 20% 70%;}
  75% {border-radius: 80% 50% 70% 90%/40% 60% 70% 40%;}
  100% {border-radius: 40% 60% 50% 40%/40% 40% 60% 60%;}
}

どなたか良い動き下さい

See the Pen CSS Slime Button by yochans (@yochans) on CodePen.