Jelly Buttons

This is some CSS for you to add jelly-like buttons to your website

Example

The HTML

Place where you want your buttons to appear

<!-- The fontawesome tag, you don't need to use this! -->
<script src="https://kit.fontawesome.com/2170f25e68.js" crossorigin="anonymous"></script>

<nav class="jellies">
  <button onclick="location.href='https://google.com';"><span class="fa-regular fa-heart"></span></button>
  <button onclick="location.href='https://google.com';"><span class="fa-regular fa-lightbulb"></span></button>
  <button onclick="location.href='https://google.com';"><span class="fa-regular fa-lemon"></span></button>
  <button onclick="location.href='https://google.com';"><span class="fa-regular fa-id-badge"></span></button>
  <button onclick="location.href='https://google.com';"><span class="fa-regular fa-font-awesome"></span></button>
</nav>

<p style="text-align:center">Using FontAwesome icons</p>

The CSS

Put into the <HEAD> </HEAD> of your document

<style>
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);
  }
}
</style>