YoVDO

Create Borders With Cut Corners - Fully Responsive CSS and Easy to Adapt

Offered By: Kevin Powell via YouTube

Tags

Responsive Web Design Courses Computer Science Courses Pseudo-classes Courses

Course Description

Overview

Learn how to create responsive buttons with cut corners using CSS in this comprehensive tutorial video. Explore the use of custom properties, clip-path, and pseudo-classes to achieve a unique border effect. Follow along as the instructor demonstrates styling techniques, including hover and focus states, to create visually appealing and adaptable button designs. Gain insights into selecting appropriate units and leveraging the :where() selector for enhanced flexibility in your CSS implementations.

Syllabus

- Introduction
- Creating the custom properties
- Styling the button itself
- Adding the clip-path
- adding pseudo-classes to create the border
- Making the border-effect
- Adding the hover and focus state


Taught by

Kevin Powell

Related Courses

Responsive Web Design Fundamentals
Google via Udacity
Introduction to Bootstrap - A Tutorial
Microsoft via edX
Responsive Images
Udacity
Responsive Website Basics: Code with HTML, CSS, and JavaScript
University of London International Programmes via Coursera
Responsive Web Design
University of London International Programmes via Coursera