Animated CSS3 Buy Now Button

In this tutorial, I’ll guide you through the process of creating a dynamic, animated ‘Buy Now’ button using CSS3. This updated guide is perfect for beginners and will walk you through the essential HTML and CSS code needed to bring your button to life, whether you’re setting up an eCommerce store or enhancing your web design skills.

Overview

Our goal is to create a ‘Buy Now’ button that not only grabs attention but also provides a seamless user experience by revealing the price upon hovering. This button could easily be linked to your shopping cart, payment gateway like PayPal, or any other relevant page.

Step 1: Setting Up the HTML

First, let’s lay down the HTML structure. The button consists of a main class, with three additional classes for the ‘Buy Now’ text, the hidden price, and the optional image icon. Here’s the basic markup:

<a class="buybtn" href="#">
  <span class="buybtn-text">Buy Now</span>
  <span class="buybtn-hidden-text">£149.99</span>
</a>

Step 2: Styling the Button with CSS

Next, we’ll style the button using CSS. We’ll create three distinct states: normal, hover, and active. This will involve background gradients, shadows, and smooth transitions to give your button a polished, modern look.

Button and Text Styling

We’ll start by styling the button in its normal state, ensuring it stands out with a gradient background, subtle shadows, and responsive text. Here’s the CSS for that:

a {
  color: #fff;
  text-decoration: none;
}

.buybtn {
  font-family: Arial, sans-serif;
  background: linear-gradient(to bottom, #ff8400 0%, #ff6600 100%);
  padding-left: 20px;
  padding-right: 65px;
  height: 45px;
  display: inline-block;
  position: relative;
  border: 1px solid #ff5a00;
  box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.8) inset,
              1px 1px 3px rgba(0, 0, 0, 0.2),
              0px 0px 0px 4px rgba(188, 188, 188, 0.5);
  border-radius: 5px;
  margin: 10px 0px;
  overflow: hidden;
  transition: all 0.3s linear;
}

.buybtn-text {
  padding-top: 10px;
  display: block;
  font-size: 18px;
  white-space: nowrap;
  text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.3);
  color: #6e1d08;
  transition: all 0.2s linear;
}

.buybtn-hidden-text {
  position: absolute;
  height: 100%;
  top: 0;
  right: 52px;
  width: 0;
  background: #6e1d08;
  text-shadow: 0px -1px 1px #363f49;
  color: #fff;
  font-size: 18px;
  white-space: nowrap;
  text-transform: uppercase;
  text-align: left;
  text-indent: 17px;
  overflow: hidden;
  line-height: 42px;
  box-shadow: -1px 0px 1px rgba(255, 255, 255, 0.4),
              1px 1px 2px rgba(0, 0, 0, 0.2) inset;
  transition: width 0.3s linear;
}

.buybtn-image {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 52px;
  border-left: 1px solid #ff5a00;
  box-shadow: 1px 0px 1px rgba(255, 255, 255, 0.4) inset;
}

.buybtn-image span {
  width: 38px;
  height: 38px;
  opacity: 0.7;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: transparent url(../images/cart.png) no-repeat 75% 55%;
  transition: all 0.3s linear;
}

.buybtn:hover .buybtn-text {
  text-shadow: 0px 1px 1px #5d81ab;
  color: #fff;
}

.buybtn:hover .buybtn-hidden-text {
  width: 100px;
}

.buybtn:hover .buybtn-image span {
  opacity: 1;
}

.buybtn:active {
  background: #ff5a00;
}

Hover Styling

Now, let’s define what happens when users hover over the button. We’ll make the text color shift to white, reveal the hidden price, and make the image icon more prominent:

.buybtn:hover .buybtn-text {
  text-shadow: 0px 1px 1px #5d81ab;
  color: #fff;
}

.buybtn:hover .buybtn-hidden-text {
  width: 100px;
}

.buybtn:hover .buybtn-image span {
  opacity: 1;
}

Active State Styling

Finally, we’ll adjust the button’s appearance for when it’s clicked, providing immediate feedback to the user:

.buybtn:active {
  background: #ff5a00;
}

Final Thoughts

And that’s it! You now have a sleek, animated ‘Buy Now’ button fully styled with CSS3, ready to enhance your eCommerce site or web project. Feel free to experiment with the styles and transitions to match your brand’s look and feel. With this 2024 update, your buttons will be both functional and visually appealing, adding that extra touch of professionalism to your site.