Example: Button Hover Animation

Scenario

In this lesson, we’ll create a button that expands when hovered using CSS transitions. This animation will be made exclusively using CSS, without using any Angular-specific features.

If you’re wondering why this is included in an Angular animation course, it’s because animations in Angular aren’t limited to using Angular-specific features. Having said that, this lesson will be using an Angular application to give you an end-to-end example of adding CSS transitions in an Angular context.

Note: We’ll create the animation in this lesson within a single component in the Angular application. We’ll use app.component.html, app.component.scss, and app.component.ts for the template, stylesheet, and any TypeScript-related logic, respectively.

Step 1: Create a button with base styling

Let’s start with creating the button in our template (app.component.html) with a class called my-button.