Text aligning center vertically and horizontally in an anchor tag – CSS

CSS

Add the following styles to the anchor tag to center/middle align it both horizontally and vetically. a.center-align{ display: flex; flex-direction: column; justify-content: center; text-align: center; }

Eyelids SVG/CSS animation

SVG Animation

CSS @keyframes eyelids { 0%{ transform: translateY(0px); } 27.5%{ transform: translateY(2px); } 30%{ transform: translateY(2px); } 35%{ transform: translateY(0px); } 45%{ transform: translateY(0px); } 100%{ transform: translateY(0px); } } #left-eyelid, #right-eyelid...

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...