From the course: Tailwind CSS 4 Essential Training

Unlock this course with a free trial

Join today to access over 24,800 courses taught by industry experts.

Challenge: Make an interactive button

Challenge: Make an interactive button - Tailwind CSS Tutorial

From the course: Tailwind CSS 4 Essential Training

Start my 1-month free trial Buy for my team

Challenge: Make an interactive button

“

(upbeat music) - [Instructor] Here's a quick challenge: There is this Buy now button that needs to be made interactive. So, currently, it's a shade of indigo. On hover, it gets a little darker, but not just that, look at this icon, it moves a little to the right on hover. Same thing on focus as well. On focus, you get a nice ring, and also, the same movement of the arrow happens. If I focus, do not focus, then the arrow moves back, on focus, it moves to the right again. So, isn't this a little nice and interactive? This is the starting state. There's no hover, focus, nothing. The default blue outline appears, which you have to remove, and then, translate this icon based on the parent hover. That's all the clue I can give. The starting code is in the branch 04_challenge, right here. This is what you can start with. All the styles are provided. button.html is the file name. If you're able to come close to it, take a look at the solution branch or watch the solution video next.

Contents