Скачать с ютуб How To Create a Custom CSS Checkbox в хорошем качестве

How To Create a Custom CSS Checkbox

In this tutorial, you'll learn how to create a custom CSS checkbox without using any JavaScript. Code and working demo: https://codepen.io/codebubb/pen/OJXRGyN How To Create a Custom CSS Checkbox ----------------------------------------------------------------- 00:00 Introduction 00:28 Project setup 01:17 Creating the Markup 03:40 Styling the unchecked state 09:59 Styling the checked state 12:26 Transitioning the checked state 14:23 Wrap-up — Follow Me — Twitter:   / codebubb   Facebook:   / juniordevelopercentral   Blog: https://www.juniordevelopercentral.com/ — Thanks! — So in this CSS checkbox tutorial, we're going to be creating a pure CSS custom checkbox design without using any JavaScript. The effect we're going for is a kind of 'slide toggle' on/off type effect. We'll start off by creating the markup which will consist of an actual HTML checkbox which we'll then hide from the user and provide a label which will toggle the state of the HTML checkbox. We'll style the custom checkbox CSS to show a background colour to denote where the slide toggle will be and add some positioning and sizing. With the container setup, we'll create pseudo before and after elements to show the actual 'button' element that can be toggled which will be absolutely positioned inside the containing element. We'll then use some more CSS to add style checkbox to make our slide toggle button move from one side of the containing element to the other. Finally, we'll add some transitions to make our slide toggle a CSS custom animated checkbox. So enjoy this How To Create a Custom CSS Checkbox tutorial with a pure CSS custom checkbox design! #CSS Channel Handle @codebubb