Css3 Buttons With Interactive Hover Effect

In this tutorial, we will explore how to create engaging and visually appealing Css3 Buttons With Interactive Hover Effect. This guide will walk you through the necessary HTML structure and CSS styling to achieve this interactive element.

Setting up the HTML Structure

First, we need to define the basic HTML structure for our navigation buttons. This involves creating an unordered list within a `nav` element, and each list item will represent a button. Within each button, we’ll include spans that will create the hover effect.

<nav>
  <ul>
    <li>
      home
      <span></span><span></span><span></span><span></span>
    </li>
    <li>
      products
      <span></span><span></span><span></span><span></span>
    </li>
    <li>
      services
      <span></span><span></span><span></span><span></span>
    </li>
    <li>
      contact
      <span></span><span></span><span></span><span></span>
    </li>
  </ul>
</nav>

Styling the Buttons with CSS

Now, let’s style the buttons using CSS. We’ll define the general button appearance, hover effects and the animations. This will cover the button colors, fonts, sizes, and the interactive hover animation.

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    --c: goldenrod;
    color: var(--c);
    font-size: 16px;
    border: 0.3em solid var(--c);
    border-radius: 0.5em;
    width: 12em;
    height: 3em;
    text-transform: uppercase;
    font-weight: bold;
    font-family: sans-serif;
    letter-spacing: 0.1em;
    text-align: center;
    line-height: 3em;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: 0.5s;
    margin: 1em;
}

nav ul li span {
    position: absolute;
    width: 25%;
    height: 100%;
    background-color: var(--c);
    transform: translateY(150%);
    border-radius: 50%;
    left: calc((var(--n) - 1) * 25%);
    transition: 0.5s;
    transition-delay: calc((var(--n) - 1) * 0.1s);
    z-index: -1;
}

nav ul li:hover {
    color: black;
}

nav ul li:hover span {
    transform: translateY(0) scale(2);
}

nav ul li span:nth-child(1) {
    --n: 1;
}

nav ul li span:nth-child(2) {
    --n: 2;
}

nav ul li span:nth-child(3) {
    --n: 3;
}

nav ul li span:nth-child(4) {
    --n: 4;
}

With the HTML structure and CSS styling complete, you’ve successfully created Css3 Buttons With Interactive Hover Effect!