ミ★ ANGELiCA'S SiTE ★彡

Jelly Buttons

This is how you can make jelly button navigation! I used to use this on one of my old layouts💖

Example

The HTML

This going into the BODY of your webpage (in between <body> and </body> tags)

<nav class="jellies">
  <button onclick="location.href='https://google.com';"><span class="angi3-robot"></span></button>
  <button onclick="location.href='https://google.com';"><span class="angi3-magic-ball"></span></button>
  <button onclick="location.href='https://google.com';"><span class="angi3-abc"></span></button>
  <button onclick="location.href='https://google.com';"><span class="angi3-mixer"></span></button>
  <button onclick="location.href='https://google.com';"><span class="angi3-teddy"></span></button>
</nav>

The CSS

This going into the HEAD of your webpage (in between <head> and </head> tags)

@import url('https://angelicas.neocities.org/fonts/Angi3.css');

nav.jellies {
  width: 93%;
  margin: 0 auto;
  text-align: center;
}

button {
  display: inline;
  z-index: 1;
  padding: 16px;
  background-color: YellowGreen;
  margin-left: 10px;
  margin-bottom: 10px;
  border-radius: 100%;
  border: 10px solid #efefef;
  box-shadow: 5px 5px 5px #cccccc;
  transition: all .9s ease-in-out;
  width: 110px;
  height: 110px;
  line-height: 75px;
  font-size:54px;
  color: #ffffff;
}

button span {
  width: 100%;
  height: 100%;
}

button:first-of-type {
  margin-left: 0px;
}

button:nth-of-type(1) {
  background: linear-gradient(90deg, #fd7ab0, #fa8085, #fd9d7c);
}

button:nth-of-type(2) {
  background: linear-gradient(90deg, #fd9d7c, #fbd97d);
}

button:nth-of-type(3) {
  background: linear-gradient(90deg, #a3d963, #2ec7d6);
}

button:nth-of-type(4) {
  background: linear-gradient(90deg, #2ec7d6, #9c70cc);
}

button:nth-of-type(5) {
  background: linear-gradient(90deg, #9c70cc, #fd7ab0);
}

button:hover {
  cursor: pointer;
  animation: jelly 1s;
  background: linear-gradient(90deg, #555555, #808080);
}

@keyframes jelly {

  0%,
  100% {
    transform: scale(1, 1);
  }

  25% {
    transform: scale(0.8, 1.1);
  }

  50% {
    transform: scale(1.1, 0.8);
  }

  75% {
    transform: scale(0.95, 1.05);
  }
}