In this series I will show you how to create few of my favourite CSS animations. Each guide will contain simple step by step process and I will highlight new less known CSS3 properties as we use them.

Final result (hover over buttons):

Full video guide: https://www.youtube.com/watch?v=Vzym_T1B5NY

  • 1) To display SVG icons we will be using Font Awesome. Link Font Awesome CDN in the document head. You can Google the latest version or find the link here.
  • 2) Choose your icon here and use it in HTML markup like so:
    <div class="button"><i class="fab fa-facebook-f"></i></div>
  • 3) Now we will make use of so called “psedo elements” to create additional bubbles we can later animate. First create .button::before element, give it background-color: #3C5A99; and position it directly over the button. Also add z-index: 10 to ‘i’ element to move it in to the front.

    Note that z-index only works on positioned elements. In this case we used position: absolute

    Your CSS at this stage:

    .button {
        display: block;
        position: relative;
        width: 50px;
        height: 50px;
        border-radius: 100%;
    }
    .button::before {
        content: ";
        left: 0px;
        top: 0px;
        position: absolute;
        width: 50px;
        height: 50px;
        background-color: #3C5A99;
        border-radius: 100%;
    }
    i {
        font-size: 30px;
        position: absolute;
        top: 50%; 
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        z-index: 10;
    }

    Result should look like this:

    ::before and ::after pseudo elements basically create empty HTML element entirely in CSS. We can attach styles to it, without the need to actually create that element in our HTML markup. This is often used for animations. It has a mandatory content: ” “ attribute.

    Notice how we centered Facebook icon in the middle of our .button, using: i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } This code is commonly used for horizontal and vertical centering of absolutely positioned elements, keep in mind that for this to work, you need to set position property on the parent as well.

  • 4) Now we create ::after pseudo element on our button class and position it outside of the button element, you can see the result on the image below:
  • .button::after {
         content: "";
         position: absolute;
         left: 60px;
         top: 0px;
         width: 45px;
         height: 45px;
         background-color: #6092fc;
         border-radius: 100%;
    }
  • 5) Position ::before element outside of the button and make it smaller and change text color on “i” element i { color: #3C5A99; } to make Facebook icon visible on white background.
    .button::before {
         content: "";
         left: -50px;
         top: 50px;
         position: absolute;
         width: 10px;
         height: 10px;
    }
    Now we have two “bubbles” created by ::before and ::after pseudo elements positioned just outside the borders of our button:
  • 6) We will animate using CSS3 Transition property. Add .button::before { transition: .15s ease-in } and .button::after { transition: .25s cubic-bezier(.14,1.88,.3,.76); }
  • Cubic-bezier function allows us to create custom animation timing. Great website to experiment and create custom cubic-beziers is here. You can also use pre-set values ease-in, ease-out, linear etc.
  • 7) Add hover effect that changes position and size of ::before and ::after pseudo elements when user hovers over their parent. Notice the unusual syntax on CSS selector .button:hover::before:
    .button:hover::before {
         left: 0px;
         top: 0px;
         width: 50px;
         height: 50px;
    }
    .button:hover::after {
         left: 10px;
         top: -2px;
         width: 45px;
         height: 45px;
         transition-delay: .2s;
    }
  • 8) Add .button:hover::after { transition-delay: .2s; }. Make sure you add transition-delay only on hovered element and not on ::after element itself, this is important for how the animation plays on mouse exit.
  • 9) Hide everything outside of our button element .button { overflow:hidden } and change color of ::after element to white .button::after { background-color: white; }, I only gave it colour to show you what”s happening behind the scenes
  • Good job!

    Final HTML:

    <div class="button"><i class="fab fa-facebook-f"></i></div>

    Final CSS:

    .button {
         display: block;
         position: relative;
         width: 50px;
         height: 50px;
         border-radius: 100%;
         overflow: hidden;
    }
    .button::before {
          content: "";
          left: 0px;
          top: 50px;
          position: absolute;
          width: 10px;
          height: 10px;
          background-color: #3C5A99;
          border-radius: 100%;
          transition: .15s ease-in;
    }
    .button::after {
          content: "";
          position: absolute;
          left: 60px;
          top: 0px;
          width: 45px;
          height: 45px;
          background-color: white;
          border-radius: 100%;
          transition: .25s cubic-bezier(.14,1.88,.3,.76);
    }
    .button:hover::before {
          left: 0px;
          top: 0px;
          width: 50px;
          height: 50px;
    }
    .button:hover::after {
          left: 10px;
          top: -2px;
          width: 45px;
          height: 45px;
          transition-delay: .2s;
    }
    i {
          font-size: 30px;
          position: absolute;
          top: 50%; 
          left: 50%;
          transform: translate(-50%, -50%);
          color: #3C5A99;
          z-index: 10;
    }

    Leave a Reply

    Your email address will not be published. Required fields are marked *