DEV Community

loading...
Cover image for Icon revealing hover animation using CSS

Icon revealing hover animation using CSS

Lakshmanan Arumugam
My passion is building an impressive and beautiful web application through carefully crafted code with user-centric design.
Originally published at lakshmananarumugam.com ・2 min read

Create a own icon icon revealing hover using HTML and CSS.

Animation inspired by google(Sheets).

let start the article. First create a HTML and the the below code.

<section>
  <button class="nav-link icono-plus"></button>
  <ul class="nav-list">
    <li class="nav-list-item"></li>
    <li class="nav-list-item"></li>
    <li class="nav-list-item"></li>
   </ul>
</section>
Enter fullscreen mode Exit fullscreen mode

The above code functionality when ever i have the button I want to show the nav-list-item items with bubble animation.

Button Design:

.nav-link {
  font-size: 18px;
  width: 36px;
  height: 36px;
  border-radius: 100%;
  border: none;
  background-color: #000;
  color: #fff;
  position: absolute;
  top: 0;
  z-index: 2;
  transition: ease 0.3s;
  transform: scale(1) rotate(0deg);
  cursor: pointer;

  .icono-plus {
    font-size: 16px;
    text-align: center;
  }
}
Enter fullscreen mode Exit fullscreen mode

Dropdown Item design

.nav-list {
  list-style:none;
  text-align: center;
  margin-top: 12px;
  position: relative;

  &-item{
    width: 22px;
    height: 22px;
    margin: auto;
    background-color: #333;
    margin-bottom: 8px;
    border-radius: 100%;
    position: relative;
  }
}
Enter fullscreen mode Exit fullscreen mode

On hover animation with full code

section {
  width: 40px;
  margin: 20px auto;
  position: relative;
}

.nav-list {
  list-style:none;
  text-align: center;
  margin-top: 12px;
  position: relative;
  display: none;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;

  &-item{
    width: 22px;
    height: 22px;
    margin: auto;
    background-color: #fff;
    margin-bottom: 8px;
    border-radius: 100%;


    &:nth-child(1) {
      transform: translateY(36px);
      animation: icon1 0.5s;
    }

     &:nth-child(2) {
      transform: translateY(40px);
      animation: icon2 0.5s;
    }

    &:nth-child(3) {
      transform: translateY(44px);
      animation: icon3 0.5s; 
    }
  }
}

.nav-link {
  font-size: 18px;
  width: 36px;
  height: 36px;
  border-radius: 100%;
  border: none;
  background-color: #000;
  color: #fff;
  z-index: 2;
  transition: ease 0.3s;
  transform: scale(1) rotate(0deg);
  cursor: pointer;

  &:hover {
    transition: ease 0.3s;
    transform: scale(0.9) rotate(45deg);

    & ~ .nav-list {
    display: block;
    }
  }

  .icono-plus {
    font-size: 16px;
    text-align: center;
  }
}

@keyframes icon1 {
  0% {
    opacity: 0;
    transform: translateY(0);
  }

  100% {
    opacity: 1;
    transform: translateY(36px);
  }
}

@keyframes icon2 {
  0% {
    opacity: 0;
    transform: translateY(0px);
  }
  30% {
    opacity: 0;
  }

  100% {
    opacity: 1;
    transform: translateY(40px);
  }
}

@keyframes icon3 {
  0% {
    opacity: 0;
    transform: translateY(0px);
  }

  20% {
    opacity: 0;
    transform: translateY(10px);
  }

  40% {
    opacity: 0;
    transform: translateY(30px);
  }

  100% {
    opacity: 1;
    transform: translateY(44px);
  }
}
Enter fullscreen mode Exit fullscreen mode

That's it. Animation ready. refer the below codepen URL for testing.

--

To more content visit my blog website

Discussion (0)