Create a Basic Calculator App in Android Studio by Uspacial

How to Create an Interactive Animated Button with CSS

In this tutorial, we will guide you through creating a simple yet elegant animated button using HTML and CSS. This button has a cool ripple effect when clicked and a smooth hover animation that adds a glowing effect. Let's get started!

Step 1: The HTML Structure

The basic structure of the button in HTML is shown below. We use a button element with a tooltip inside for extra interactivity.

<div class="button-container">
  <button class="button">
    Click Me
    <span class="tooltip">Interactive Button!</span>
  </button>
</div>
    

Step 2: The CSS Styling

Next, we will style the button with CSS, adding padding, background color, and an animation for both hover and active states. The code for styling the button is as follows:

.button-container {
  position: relative;
}

.button {
  background-color: #6200ea;
  color: white;
  padding: 15px 30px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.4s, box-shadow 0.4s;
}

.button:hover {
  background-color: #3700b3;
  box-shadow: 0 8px 20px rgba(98, 0, 234, 0.6);
}

.button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.6s ease-out;
}

.button:active::before {
  transform: translate(-50%, -50%) scale(1);
}

.tooltip {
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
}

.button:hover .tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(-5px);
}
    

With these simple steps, you now have a functional and beautiful animated button that you can implement on your website to enhance the user experience!