Angular › Angular Animations

How would you animate a button so it grows slightly when a user hovers over it?

Beginner

Answer

You can combine a simple Angular animation trigger with a state that responds to a boolean flag toggled by a mouseenter and mouseleave event, or more simply use plain CSS transitions directly for such a small hover effect, since Angular animations are best suited for more complex state based transitions.

@Component({
  selector: 'app-hover-button',
  template: `<button (mouseenter)="hovered = true" (mouseleave)="hovered = false" [@grow]="hovered ? 'big' : 'normal'">Click Me</button>`,
  animations: [
    trigger('grow', [
      state('normal', style({ transform: 'scale(1)' })),
      state('big', style({ transform: 'scale(1.1)' })),
      transition('normal <=> big', animate('150ms ease-out'))
    ])
  ]
})
export class HoverButtonComponent { hovered = false; }

Real-world example A pricing page adds a small hover grow effect to its subscribe button, making the button feel more clickable and interactive to visitors.

Common follow-ups: Would plain CSS be simpler than Angular animations for this specific hover effect?;How would you add the same hover effect to many buttons without repeating code?

Components & Templates;Directives