Skip to content
CSS Wolf
  • CSS
  • Vue
  • Tips and tricks
  • All Posts

CSS

How to Make a Power Button Effect in CSS

September 29, 2022September 16, 2022 by Gauri Shanker
Power-button-effect-in-CSS-2

In this article, I will show you (step-by-step) how you can create a power button effect in CSS without using any JavaScript. At the end of the article, I have also included a Codepen so that you can see my full code in action. I strongly suggest you follow along with this tutorial. Click here … Read more

Categories CSS Tags :active, pseudo-classes Leave a comment

How to Make a Radar Scanner Animation in CSS (Using pseudo-elements)

September 29, 2022September 14, 2022 by Gauri Shanker
Radar scan animation pure css

In this article, I will explain (step by step) how you can make the radar scanner animation in CSS without using any JavaScript. At the end of this tutorial, I have also added a Codepen block with complete code so that you can play around with it. I strongly suggest you open a new Codepen … Read more

Categories CSS Tags css animation, cubic-gradient Leave a comment

How to Make a Realistic Button Press Effect in CSS (No JavaScript)

September 29, 2022September 13, 2022 by Gauri Shanker
Realistic button press animation in pure CSS

If you want to learn how can we achieve the button press effect in CSS, this article is for you. I cover the entire process step by step using which you can achieve the same effect as shown in the featured image above. At the end of this article, you will also find a Codepen … Read more

Categories CSS Tags :active, :hover, pseudo-classes Leave a comment

How to Make a Pure CSS Loading Animation (in 5 Minutes)

September 29, 2022September 12, 2022 by Gauri Shanker
rotating loader animation in pure CSS

If you are wondering how to make a pure CSS loading animation, then you have come to the right place. In this article, I will explain step by step how you can create the following loading animation with pure CSS (without touching a single line of JavaScript). At the end of this article, you will … Read more

Categories CSS Tags css animation, transform, transform-origin Leave a comment

CSS Animations for Beginners – (A Step by Step Guide)

September 29, 2022September 3, 2022 by Gauri Shanker
CSS Animations for beginners Ultimate Guide

If you are looking for a complete beginner’s tutorial on CSS animation, this post is for you. In this article, I cover all the basics of how you can animate HTML elements using CSS. Along the way, you will create the following bouncing ball animation👇. I strongly suggest you follow along with this guide in … Read more

Categories CSS Tags css animation 1 Comment
Newer posts
← Previous Page1 Page2
Hi, I’m Gauri Shanker, the face behind this blog. After 15 years on Windows, I finally made the leap to Mac and fell for it hard. I dove deep into the ins and outs of macOS—from Reddit threads to YouTube deep dives—and now I share what I’ve learned to help other Mac converts make the most of their switch.

Alongside Mac tips, I also love coding and sharing my favorite hacks and solutions. If you’re into tech, tips, and coding, welcome! You'll love it here.
  • Rectangle vs Raycast: Best Window Management App for Mac
  • How to Use YouTube Without a Mouse
  • How to Read the Business Insider Prime Articles for FREE
  • How to Use a Browser Without a Mouse on Windows and Mac
  • How to Change the Appearance of Any Website

About

I am Gauri Shanker, a coding enthusiast. I learn new things almost every day and share them through this blog.

Articles on this blog may contain some affiliate links. It means if you buy something from these links, I may get a commission at no extra cost to you.

Follow me on Twitter and Pinterest.

Popular Posts

  • Rectangle vs Raycast: Best Window Management App for Mac
  • How to Use YouTube Without a Mouse
  • How to Read the Business Insider Prime Articles for FREE
  • How to Use a Browser Without a Mouse on Windows and Mac
  • How to Change the Appearance of Any Website
© 2025 CSS Wolf • Built with GeneratePress