Create a Captivating Button Grow Animation with CSS

Introduction

In this lab, we will learn how to create a button with a grow animation on hover using CSS. This effect can be used to add interactivity and visual interest to a website or application. By applying the transform property and :hover pseudo-class, we can make the button scale up when the user hovers over it, creating a subtle but effective animation.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/BasicStylingGroup(["`Basic Styling`"]) css(("`CSS`")) -.-> css/CoreLayoutGroup(["`Core Layout`"]) css(("`CSS`")) -.-> css/IntermediateStylingGroup(["`Intermediate Styling`"]) css(("`CSS`")) -.-> css/DynamicStylingGroup(["`Dynamic Styling`"]) css/BasicConceptsGroup -.-> css/selectors("`Selectors`") css/BasicStylingGroup -.-> css/colors("`Colors`") css/CoreLayoutGroup -.-> css/margin_and_padding("`Margin and Padding`") css/CoreLayoutGroup -.-> css/borders("`Borders`") css/IntermediateStylingGroup -.-> css/backgrounds("`Backgrounds`") css/DynamicStylingGroup -.-> css/transitions("`Transitions`") css/DynamicStylingGroup -.-> css/transformations("`Transformations`") css/IntermediateStylingGroup -.-> css/pseudo_classes("`Pseudo-classes`") subgraph Lab Skills css/selectors -.-> lab-35177{{"`Button Grow Animation`"}} css/colors -.-> lab-35177{{"`Button Grow Animation`"}} css/margin_and_padding -.-> lab-35177{{"`Button Grow Animation`"}} css/borders -.-> lab-35177{{"`Button Grow Animation`"}} css/backgrounds -.-> lab-35177{{"`Button Grow Animation`"}} css/transitions -.-> lab-35177{{"`Button Grow Animation`"}} css/transformations -.-> lab-35177{{"`Button Grow Animation`"}} css/pseudo_classes -.-> lab-35177{{"`Button Grow Animation`"}} end

Button Grow Animation

index.html and style.css have already been provided in the VM.

To create a grow animation on hover, you can use an appropriate transition to animate changes to the element. Use the :hover pseudo-class to change the transform property to scale(1.1). This will grow the element when the user hovers over it.

Here is an example code snippet you can use:

<button class="button-grow">Submit</button>

.button-grow {
  color: #65b5f6;
  background-color: transparent;
  border: 1px solid #65b5f6;
  border-radius: 4px;
  padding: 0 16px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.button-grow:hover {
  transform: scale(1.1);
}

Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Summary

Congratulations! You have completed the Button Grow Animation lab. You can practice more labs in LabEx to improve your skills.

Button Grow Animation

Introduction

Skills Graph

Button Grow Animation

Summary

Other CSS Tutorials you may like