Animated CSS3 Buy Now Button

This is a beginner’s tutorial to show some of the basic Animated CSS3 Buy Now Button 2021 now available within CSS3. I’ll go through the CSS and HTML Markup code needed and explain how it all ties together.

The example I am going to use is a ‘Buy Now’ button which could be used for an eCommerce store. The button shows that the product is available for purchase and using CSS3 elements it is animated to display the price when the user hovers over it. The button could link to a shopping cart or directly into Paypal for example.

The Markup Animated CSS3 Buy Now Button

Ok, so to start with we need some HTML. The HTML for the button itself is very simple. There is one class for the button itself, and then three classes for the individual elements of the ‘buy now’ text, the price, and the image.

1 2 3 4

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

Now we need to style the button. For the purpose of this tutorial we are going to have 3 states. A normal state, a hover state and an active state for the button.

The CSS breaks down as follows:

Button and Text Styling

Next, we need to style the button itself and the three elements within it. The following code includes background gradients, shadow, and transition effects on the button and text. This is the styling the button will have in its normal state.

Hover Styling

The following CSS makes a minor adjustment to the already defined button styles. These styles are activated when a user hovers over the button.

Active State Styling

Finally, we make a slightly darker background for the button to be shown when the button is clicked.