Awesome Button Hover Effect | Only HTML & CSS

New to CSS Grid? Watch the full Crash Course here: https://www.youtube.com/watch?v=yOPCQ5nD1Vs

In this video I go over how to create a button hover using only HTML and CSS. I show you how I create the structure of the page with HTML and then I write all of the CSS. I use CSS Grid, ::before and ::after pseudo elements with hover effects to create this dynamic button effect.

Codepen: https://codepen.io/angeladelise/pen/dyYyQON

In this video I show you:
0:28 - Starting Code
0:44 - HTML Code
1:19 - How to create a Linear gradient
2:48 - Button CSS Styling
4:26 - How to create a ::before pseudo element
5:13 - How to change alignment of position absolute element
6:03 - How to create a ::after pseudo element
7:09 - How to add hover effects to pseudo elements
7:46 - How to add an animation transition
8:08 - How to use overflow:hidden
8:36 - How to add a color hover effect

Want to improve designer to development handoff? View my Sketch to Zeplin workflow here: https://www.youtube.com/watch?v=D3ZF2...

Let's Connect
Dribbble: https://dribbble.com/angeladelise
Blog: https://medium.com/@angeladelise