CSS3 Soft UI Button || Neumorphism UI Button ON / OFF Design || Pure CSS Checkbox Design

-

Watch Video - https://youtu.be/SSzuc7yoAE0
Creating an ON/OFF switch using a checkbox with Neumorphism UI. 2020 Soft UI Design.
Design a checkbox and get some cool effects of this. 

 Font awasome CDN :
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet" />
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

 Icon Code :  "\f011";


Location: India

Comments

Post a Comment

Popular posts from this blog

CSS Ellipsis | How To Truncate Text With An Ellipsis | Using of CSS Text-Overflow

-
Image
Watch Video - https://youtu.be/6fcmTfIIxRc The text-overflow  property specifies how overflowed content that is not displayed should be signaled to the user. It can be clipped, display an ellipsis (...) , or display a custom string. In this video, we are going to take a look at the " Text-Overflow " property in CSS. It's used to handle cases where text overflows its container. In this tutorial, you will learn how to truncate/clip/cut/hide text with an Ellipsis using CSS. CSS Code : .box p { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
Read more

Loading Text With Water Animation Using HTML & CSS

-
Image
Watch Video - https://youtu.be/kBPgZYOKda4 In this post, I’ll show you how to make a ‘ text filling with liquid ’ effect. It can be used for preloaders, titles. Doing this with CSS would be pretty simple, if not for one problem: to use text as a mask, we require the property  background-clip:text; HTML Code : <div class="loading wave"> Loading </div> CSS Code : .loading { text-transform: uppercase; font-weight: bold; font-size: 100pt; text-align: center; height: 120px; line-height: 110px; display: block; } .wave { background-image: url(water.png); -moz-background-clip: text; -webkit-background-clip: text; -o-background-clip: text; background-clip: text; color: transparent; text-shadow: 0px 0px rgba(255,255,255,0.06); animation: wave-animation 1s infinite linear, loading-animation 10s infinite linear alternate; background-size: 200px 100px; ba...
Read more

Water Ripple Effects using pure CSS | No JavaScript | Neumorphism UI Button Design 2020

-
Image
Watch Video -   https://youtu.be/8t-Mrad6Cdk In this video, I will show you how to create a Neumorphism button and create Water Ripple Effect using Pure CSS, No JavaScript in quick, easy, and simple steps. Click the button to animate the Wave effect CSS tutorial. CSS Code : button {     border: none;     border-radius: 40px;     padding: 20px 30px;     font-size: 20px;     text-transform: uppercase;     cursor: pointer;     color: #34495e;     letter-spacing: 2px;     background-color: transparent;     outline: none;     box-shadow: -7px -7px 17px rgba(255,255,255,0.6),         7px 7px 17px rgba(70,70,70,0.12); } .wave {     background-position: center;     transition: background 0.8s; } .wave:hover {     background: #f2f2f3 radial-gradient(circle, transparent 1%, #f2f2f3 1%) center/15000%; ...
Read more