Social media icon Neumorphism design with HTML and CSS || Soft UI Design in 2020

-

Watch Video - https://youtu.be/aMOSF9B9Q3A
In this video, we will explain about CSS Neumorphism Social Icon Button Design in HTML & CSS or Neumorphism Soft UI Button Design.

 Icon copy from Font Awesome.

 in CSS social icon color code : 
.fa-facebook-f {
    color: #3b5998;
}
.fa-twitter {
    color: #00acee;
}
.fa-whatsapp {
    color: #25d366;
}
.fa-instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.fa-linkedin-in {
    color: #0e76a8;
}
.fa-github {
    color: #211f1f;
}


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