Problem description

Given an HTML page containing a <button class="cta-button">Click Me</button> element, write CSS to:

• Style the button with padding, background color, text color, no border, and rounded corners.

• Define a @keyframes pulse animation that scales the button from scale(1) to scale(1.1) at 50% and back to scale(1) at 100%.

• Apply the pulse animation to the button with a duration of 1.5s, timing function ease-in-out, and infinite iteration.

Goal

Write CSS rules to animate the .cta-button element so it gently pulsates in size.

Constraints

• Use only CSS (no JavaScript).

• Button padding should be 1rem 2rem.

• Background color should be #007BFF, text color: #fff.

• Border should be none; border-radius should be 4px.

• Animation name should be pulse.

• Animation duration should be 1.5s.

• Animation timing function should be ease-in-out.

• Animation iteration count should be infinite.

• Keyframes should be at 0%, 50%, and 100% with respective transform: scale() values.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.