New to CSS Grid? Watch the full Crash Course here:    • CSS Grid Crash Course | Beginners Tut...  

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/d...

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:   / angeladelise