Creating a CSS-Only Directionally Aware Button

Creating a CSS-Only Directionally Aware Button

Kevin Powell via YouTube Direct link

- Introduction

1 of 9

1 of 9

- Introduction

Class Central Classrooms beta

YouTube videos curated by Class Central.

Classroom Contents

Creating a CSS-Only Directionally Aware Button

Automatically move to the next video in the Classroom when playback concludes

  1. 1 - Introduction
  2. 2 - The HTML and starting CSS
  3. 3 - Setting up the hover zones
  4. 4 - Adding a pseudo-element for the effect
  5. 5 - Making the effect work from the middle
  6. 6 - Making the effect work from the sides
  7. 7 - Improving how it looks
  8. 8 - Improving the look when you let go of the click
  9. 9 - Browser support

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.