Add some animation on pay button

Hey, Yesterday I created this https://bbbootstrap.com/snippets/bootstrap-dark-themed-shopping-checkout-form-60033953 using HTML and CSS. but I want to add some animation on the pay button.

<button type="button" class="btn btn-primary btn-block">

The first thing to zero in on is the object itself, and examine its attributes. The first attribute, type is set as button. Is this the only button in the form? That’s what to scope on.

If it is the only element of type button, then being the lowest specificity selector possible is the appropriate choice. Any more is contrived, and unnecessary.

Having selected that object, explore the possible behaviors you can or should give it. What did you have in mind?

Aside

A <button/> is already, type: button, so we would not give it a type attribute.

Gradient Assignment

We could use the CSS gradient property in combination with JS to iterate through a range so that color changes from left to right, or top to bottom simply by rewriting the style rule multiple times with variation. Read up on gradients and transitions and conceive. Then share your ideas.

<button class="btn btn-primary btn-block">Pay</button>

In the style sheet (incl. script), add the parent to the selector…

form button {

}

This excludes buttons in the page that are not in a form element. A tiny bit of added specificity. We want to transition from one color to another in about half a second. Graphically it can be done a number of ways. Think this through.

Addendum

A really smart page would detect the language and determine the direction for the transition. Some languages read right to left, and others may read bottom to top.

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.