Simple Button Hover Effects using HTML & CSS

Simple Button Hover Effects using HTML & CSS (Free Code)

In this article, I have shown you how to create Simple Button Hover Effects using HTML and CSS. Buttons are used in different places on any website. In this tutorial, you will learn how to make simple button hover effects CSS.

Animated buttons are much more interesting than ordinary buttons. Added hover effect to this button. When the mouse is moved over the button, some changes will be made to the button. 

I have designed this button with the color of the Indian flag. In other words, the color of the Indian flag has been used in the background of the simple hover button CSS.

Simple Button Hover Effects CSS

When hovering over that button, the back of the button can be seen as the color shadow of the button. You can use this Simple Button Hover Effects in any of your buttons. Undoubtedly this CSS button hovers effect will make your button more beautiful.

Below is a demo or preview that will help you to know how this button hover works.

See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.

As you can see above, there is a button that uses the color of the Indian flag in the background. That is, the first ocher, then white and then green has been used. I have used a text here.

I used a small amount of HTML and CSS to make it. If you only want the source code, you can use the download button at the bottom of the article. However, I request you to follow the tutorial below.

Step 1: Basic structure of button hover

Button’s basic information has been created using the following HTML and CSS codes. Here I have used a text that you can change the text to your liking. 

Background color black has been used here. When you use it in your project, you can change this color to your liking.

<div class=”ct-btn”>
   <div class=”gr-tri”>
       <span class=”gr-shadow3″></span>
       <button class=”gradient-neon”>My India</button>
   </div>
</div>
* {margin:0;padding: 0;}
body {
  background-color: #272727;
  margin: 200px auto;
}
.ct-btn {
  justify-content: center;
  display: -webkit-box;
  display: flex;
  cursor: pointer;
  margin:20px;
}
Basic structure of button hover

Step 2: Design the button with CSS (more…)

Continue ReadingSimple Button Hover Effects using HTML & CSS (Free Code)
Rain Animation Effects using CSS

Simple Rain Animation Effects using CSS & JavaScript

Rain Animation Effects using CSS

In this article, you will learn how to create Rain Animation Effects using CSS and javascript. You will see this kind of CSS Rain Effects animation in different places. Creating this effect is much easier if you know basic CSS and javascript.

This type of Rain Animation effect is used in the background of different projects or elements. The black color of the webpage background has been used to create this CSS animation rain. Then the point of white water is falling from top to bottom. Although JavaScript has been used to make it work.

Pure CSS Rain Animation Effect

Here you can use color instead of white color which is more beautiful and attractive. This design is used in the background of various projects which basically helps to enhance the beauty. 

Below I have given a demo that will help you to know how it works. Live Demo 👇👇

See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.

As you can see above a lot of water droplets are falling from the top to the bottom on a gradient background. This project looks very difficult but it is very easy to make. This beautiful CSS rain animation with Lightning can be created with very little code.

If you only want the source code, you can use the download button below the article. And use the demo section above to get the live demo.

How to Create Rain Animation Effect using CSS

Below I have shown with some steps how I have created Rain Animation Effects using CSS. No HTML code is used here. 

These animations can be seen in the background of the webpage. So the body tag of the webpage has been used. So there is no need to use any HTML separately.

Step 1: Design the webpage (more…)

Continue ReadingSimple Rain Animation Effects using CSS & JavaScript
Skeleton Loading Animation using HTML & CSS

Skeleton Loading Animation using HTML & CSS

Skeleton Loading Animation using HTML & CSS

In this article, you will learn how to create Skeleton Loading Animation using HTML and CSS. Already shared a tutorial on creating a working skeleton loader using JavaScript. Now is the time to create Skeleton Loading Animation CSS.

The design I made earlier was completely functional, meaning the content could be seen after a short loading animation. However, in the case of this design, it will not be the only animation that will continue here. This will help beginners understand how skeleton CSS animation works. 

If you want to make it work with JavaScript you can follow the previous tutorial. The CSS Skeleton Loading animation created here was originally created on a profile card.

Skeleton Loading Animation CSS

You must have seen different types of websites where such animations on elements or content can be seen during internet slowdown. For example, in the case of websites like YouTube, Facebook, etc., you will see this type of screen loading animation when the internet speed is low. 

Which satisfies some of the users and enhances the beauty of the website. Below I have given a demo that will help you to know how this design works. 

See the Pen
Skeleton Loading Animation CSS by Foolish Developer (@foolishdevweb)
on CodePen.

The demo above has helped you to know how this loading animation works. As you can see, a web page is painted blue. Then a box was made. HTML and CSS have been used to make it much easier. 

We created its basic structure with the help of HTML and designed it with the help of CSS. Since it was not implemented, no JavaScript was used.

How to Create Skeleton Screen Loading Animation

This box is basically a profile card that first contains a small profile image space. Then there is the place to give the name and then some basic information. After all, there is a place to put icons on some social media. Skeleton Loading Animation CSS has been added to these places. This animation will continue for 2 seconds.

Now it’s time to use HTML and CSS to create it. This requires you to have a basic idea about HTML and CSS. If you only want the source code, you can use the download button below the article.

Step 1: The basic structure of this effect (more…)

Continue ReadingSkeleton Loading Animation using HTML & CSS