Unique ripple effect animation on hover that follows cursor

CSS Animations

Created this cool-looking ripple effect animation on the button. It can be implemented on any other element other than buttons. The expanding ripple / circular shape follows mouse/pointer movement during the mouseenter and mouseleave event. The supporting script is in...

CSS shapes for reverse curved corners

CSS

Reverse cornered css shape in white color Here is a simple example of how we can create reverse cornered shapes in the white color shown in the image above. Please have a look at the demo below and also check its HTML and CSS. You can also edit it in Codepen and...

How to create a SCSS to CSS compiling setup?

CSS

Hi, I have created a very nice and minimal working scss/sass to css compiling setup on my local and i am sharing the steps to do it with you. Step 1 – install node js from here – https://nodejs.org/en/ Step 2 – initialize package.json file with...

Card UI Hover Floating

CSS Animations, Misc

I like this small piece of code. It’s a very fluid, very nice, and light kind of experience to have as a card on your website. See the Pen Product Card UI Hover Floating by Puneet Sharma (@webdevpuneet) on CodePen.

Animating signature with SVG and CSS

SVG Animation

See the Pen Sign With a Dotted Line: Animated SVG Signature (part 7) by Puneet Sharma (@webdevpuneet) on CodePen.