freeCodeCamp's Use CSS Animation to Change the Hover State of A Button, Applied Visual Design

Channel:
United States We Will Code
Subscribers:
8,020
Published on ● Video Link: https://www.youtube.com/watch?v=0oEHXEvx8yM


Duration: 1:34
111 views
1

In this freeCodeCamp lesson from the Applied Visual Design section we look at using animation to change our button's hover state. Using animation to change a buttons hover effect first begins with selecting our button. We then add the pseudo-class on hover (:hover) to specifiy we only want our stye to be applied on hover. We then specify an animation name and the duration in milliseconds ( 1 second is the same as 1000 milliseconds). Then we use CSS keyframes (@keyframes) to specify what we want to happen at what point in time. In our challenge we have it change the background color on hover. but in the next lesson we will add some code to make it a bit better. See you humans in the next lesson



Other Videos By We Will Code


2018-10-28freeCodeCamp's Use a Bezier Curve to Move a Graphic, Applied Visual Design
2018-10-28freeCodeCamp's Learn How Bezier Curves Work, Applied Visual Design
2018-10-26freeCodeCamp's Change Animation Timing with Keywords, Responsive Web Design
2018-10-25freeCodeCamp's Animate Multiple Elements at Variable Rates, Applied Visual Design
2018-10-25freeCodeCamp's Animate Elements at Variable Rates, Applied Visual Design
2018-10-14freeCodeCamp's Make a CSS Heartbeat using an Infinite Animation Count
2018-10-14freeCodeCamp's Animate Elements Continually Using an Infinite Animation Count
2018-10-10freeCodeCamp's Create Visual Direction by Fading an Element From Left To Right
2018-10-09freeCodeCamp's Create Movement Using CSS Animation, Applied Visual Design
2018-10-04freeCodeCamp's Modify Fill Mode of an Animation, Applied Visual Design
2018-10-04freeCodeCamp's Use CSS Animation to Change the Hover State of A Button, Applied Visual Design
2018-10-01freeCodeCamp's Create a More Complex Shape Using CSS and HTML
2018-09-30freeCodeCamp's Create a Graphic Using CSS, Applied Visual Design
2018-09-28freeCodeCamp's Use the CSS Transform Property skewY to Skew
2018-09-28freeCodeCamp's Use the CSS Transform Property skewX to Skew an Element Along the X-Axis
2018-09-27freeCodeCamp's Use the CSS Transform scale Property to Scale an Element on Hover
2018-09-27freeCodeCamp's Use the CSS Transform scale Property to Change the Size of an Element
2018-09-26freeCodeCamp's Create Texture by Adding a Subtle Pattern as a Background Image, url function
2018-09-25freeCodeCamp's Use a CSS Linear Gradient to Create a Striped Element
2018-09-24freeCodeCamp's Create a Gradual CSS Linear Gradient, Applied Visual Design
2018-09-22freeCodeCamp's Adjust the Tone of a Color, Applied Visual Design


Tags:
CSS keyframes
@keyframes
css animation
animations in css
animation duration
animation css