Button Ripple Effect using HTML, CSS & JavaScript

Button Ripple Effect using HTML, CSS & JavaScript

Button Ripple Effect using HTML, CSS & JavaScript

In this article, you will learn how to create Button Ripple Effect using HTML, CSS, and JavaScript. I have shared many more button animations with you before. This is the first time I will create a Ripple Effect in a button.

Button Ripple Effect CSS is basically a kind of onclick effect i.e. when you click on the button this Button Ripple Effect JavaScript can be seen. 

If you don’t know what Ripple Effect is, let me tell you, it is a kind of simple effect. When you click on something, a colorful circle will be created in that place. These colorful circles can be matched in size.

Button Ripple Effect CSS

Below I have given a demo that will help you to understand how this circular ripple effect works. Here you will find the required source code and live preview.

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

Although I have shared tutorials on creating many more types of buttons before, the most notable of which are neon buttons, gradient buttons, glowing buttons, etc. 

Html, CSS, and javascript have been used to create this button ripple effect. The button’s structure was first created using HTML. Then it was designed by CSS. After all, the ripple effect has been implemented by JavaScript.

You need JavaScript enabled to view it to create this button ripple animation. JavaScript will basically help you determine the position of your causer and create those colorful circles in the place where you click.

How to Create Button Ripple Effect CSS

If you want to create this Button Ripple Effect you can follow the step-by-step tutorial below. If you know basic HTML, CSS, and javascript then you can create it. 

If you only want the source code, you can use the download button or code section at the bottom of the article.

Step 1: The basic structure of the button

First, the basic structure of the button was created using some HTML code.

<div class=”content-wrapper”>
   <div class=”button-ripple-effect”>Click me</div>
</div>

The webpage is designed with the following CSS. I have used black as the background color of the webpage here.

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.content-wrapper {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #1c1d22;
}
The basic structure of the button

Now the button has been designed. The size of this button depends on the padding and linear-gradient color is added to the background.

.content-wrapper .button-ripple-effect {
position: relative;
padding: 20px 50px;
border: 0;
border-radius: 60px;
background: linear-gradient(90deg, #f18c2c, #df694f);
color: #ffffff;
font-family: “Raleway”, sans-serif;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 1.4px;
cursor: pointer;
overflow: hidden;
-webkit-mask-image: -webkit-radial-gradient(white, black);
}
button has been designed

Step 2: Add Ripple Effect to the button (more…)

Continue ReadingButton Ripple Effect using HTML, CSS & JavaScript
How To Create a Bottom Navigation Bar HTML CSS

How To Create a Bottom Navigation Bar HTML CSS

How To Create a Bottom Navigation Bar HTML CSS

In this tutorial, you will learn how to create Bottom Navigation Bar HTML CSS. Earlier I shared another tutorial on creating a Bottom Navigation Menu. This type of CSS tab we see mainly in the case of responsive devices. 

This type of Bottom Navigation Bar HTML is found mainly in the case of mobile apps. This design can only be created by HTML CSS. 

Although I have used some JavaScript to make the animation used here work. If you omit the animation, you can create this mobile bottom navigation bar with HTML CSS.

Bottom Navigation Bar HTML CSS

For your convenience, I have given a preview below. Icons have been used instead of text for menus. If you only want the source code, use the button below the article.

See the Pen
Navigation Bar – JS by Foolish Developer (@foolishdevweb)
on CodePen.

First, the basic structure of the Fixed bottom navbar has been created on the webpage. White color has been used in the background of the navbar. 

Then I used 5 icons here. You can increase the amount of menu according to your needs. Here the color of the active icon will be red. Borders have been added to the active icons using CSS before and after. 

A border of 8px can be seen above and below the menu item that will be active. When you click on another icon, its borders will be removed and added to that icon.

How to Create a Bottom Navigation Menu

Below I have shared step by step tutorial and show how to create a bottom navigation bar design. For this, you need to have an idea about HTML, CSS, and javascript. 

However, if you are a beginner, follow the tutorial below. If you create this Bottom Navigation Menu using HTML checkboxes then you don’t need to use JavaScript.

Step 1: Basic structure of Bottom Navbar

First, the basic structure of this fixed bottom navbar has been created.

<nav class=”navigation-bar”>
  <ul class=”list-items”>
     
  </ul>
</nav>

I designed the webpage using the code below and added a background color.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  background-color: #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: center;
}

I have used min-height: 30px, min-width: 200px of this navbar and the background color is white.

.navigation-bar {
  background: #fff;
  border-radius: 3px;
  min-height:30px;
  min-width:200px;
  overflow: hidden;
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
}
.navigation-bar .list-items {
  list-style: none;
  display: flex;
  position: relative;
}
Basic structure of Bottom Navbar

Step 2: Add menu items to the Navigation Bar (more…)

Continue ReadingHow To Create a Bottom Navigation Bar HTML CSS
How To Create a Modal Popup using JavaScript

How To Create a Modal Popup using JavaScript

Modal Popup using JavaScript

This article will help you to know how to create Modal Popup JavaScript. Here we have shared step by step tutorial using JavaScript to create a modal popup.

Earlier I showed you how to create an automatic popup window. However, here you can open the window in two ways, automatic and manual.

When we open a website, we see different types of subscription forms, such as Advantage, with the help of this type of JavaScript Modal Popup. However, the javascript popup window used on most websites is automatic. This means that when the page is opened, this popup box is automatically seen.

Modal Popup JavaScript

This design is a little different. This Modal Popup JavaScript will be visible when you load the page. There is also a button that allows you to see this box. Below is a preview of how this design works.

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

As I said it is an automatic and manual model pop-up created by JavaScript. First I used a gradient background color on the page. 

Then I created a button that can be used to manually view this Modal Popup JavaScript. Also, when you load that page, this window will automatically appear in front of you.

There is a Cancel button to hide Modal Popup. This window contains an image, a heading, some text, and a cancel button.

How to Create a Modal popup in JavaScript

If you know basic HTML, CSS, and javascript then you can easily create this modal popup in javascript. First I added basic information using HTML. 

Then I designed it with CSS and arranged it to open it automatically. Finally, the popup button and the cancel button have been activated by JavaScript.

Step 1: Create popup button

We first created a button using the following HTML and CSS code that will act as a popup button.

<button class=”btn open-modal” id=”open-modal”>Open Modal</button>

I designed the webpage using the following CSS. The linear-gradient background color is used on the page.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: “PT Sans”, sans-serif;
  background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
}
designed the webpage

Now I have designed the button. Depending on the size padding of this button.

.btn {
  font-family: “PT Sans”, sans-serif;
  font-size: 1.2rem;
  padding: 1rem 2.5rem;
  cursor: pointer;
  border: none;
}
.open-modal {
  background: #fff;
  border-radius: 5px;
  border: 1px solid transparent;
  box-shadow: 0 5px 10px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.2s linear;
}
.open-modal:hover {
  box-shadow: none;
  background: rgba(255, 255, 255, 0.5);
  border-color: #fff;
}
Create popup button

Step 2: Basic structure of Modal Popup (more…)

Continue ReadingHow To Create a Modal Popup using JavaScript
Responsive Counter Up Animation using JavaScript

Responsive Counter Up Animation using JavaScript

line-height: 2em;}

h3{text-align: left;
font-family: Open Sans,Arial,sans-serif;
line-height: 1.7em;
color:black;
color:#333131;
font-weight: 520;

-webkit-font-smoothing: antialiased;
}

h2{text-align: left;
font-family: Open Sans,Arial,sans-serif;
line-height: 1.7em;
color:black;

font-weight: 620;
-webkit-font-smoothing: antialiased;
}

.class {
background:#edf0f2;
font-family: Consolas,Monaco,Lucida Console,monospace;
line-height: 1.65;
word-wrap: break-word;
border-radius: 5px;
color:#001d8f;
font-size:17.1px;
padding-left:10px;
white-space: pre-wrap;}

button.last-btn{
padding:14px 29px;
font-size:17px;
background-color:#0e87f0;
border-radius:6px;
color:white;
font-family: Open Sans,Arial,sans-serif;
border:none;
margin-left:35%;

}

@media only screen and (max-width: 400px) {
button.last-btn{
margin-left:0px;
margin-right:0px;
}
}
@media only screen and (max-width: 300px) {
button.last-btn{
margin-left:0px;
margin-right:0px;
}
}
@media only screen and (max-width: 600px) {
button.last-btn{
margin-left:0px;
margin-right:0px;
}
}
@media only screen and (max-width: 800px) {
button.last-btn{
margin-left:0px;
margin-right:0px;
}
}

@media only screen and (max-width: 400px) {
.copyButton {
width: 45%;
}

Responsive Counter Up Animation:

Responsive Counter Up Animation using JavaScript

In this article, you will learn how to create Responsive Counter Up Animation using HTML CSS, and JavaScript. We use javascript Counter Up Animation in many places. For different types of personal websites, business websites, etc. 

This type of responsive counter up animation is most commonly used in business websites. For example, you can use this project in case you want to show the quantity of any product on your business website.

30 OTP input fields using HTML, CSS, and JS

Count animation is used between the numbers here. This type of Responsive Counter Up Animation is often used by developers to create queries. But if you want you can make it with the help of simple javascript. This tutorial will show you how to create JavaScript Counter Up Animation.

JavaScript Counter Up Animation

Html, CSS, and javascript have been used to create this Counter Up Animation JavaScript. A very simple code is used here for beginners.

Below is a preview of this Number Countup Animation. Which will help you to know how it works. I used a nice background image on a web page as you saw above. On which four small boxes have been made. One icon, one number, and one test have been added to the box. 

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

I have made the background of this simple count-up animation transparent. As a result, these small boxes can be seen almost transparently in the background. 

I have already shared tutorials on creating many elements such as login forms, profile cards, etc. using transparent design.

How to Create a Responsive Count up Animation

To create this Responsive Counter Up Animation you need to have a basic idea about HTML, CSS, and javascript. I have shared step by step tutorial here. I have given possible results with pictures after each step.

Step 1: HTML Code of Count up Animation

I have added all the information using the following code. I made four boxes. In that box you can see the icon first, then the number count down, and then a text.

<div class=”wrapper”>
 
  <div class=”container”>
     <i class=”fa-brands fa-html5″></i>
     <span class=”num” data-val=”365″>000</span>
     <span class=”text”>HTML Project</span>
  </div>
 
  <div class=”container”>
     <i class=”fa-brands fa-python”></i>
     <span class=”num” data-val=”290″>000</span>
     <span class=”text”>Python Project</span>
  </div>
 
  <div class=”container”>
     <i class=”fa-brands fa-node-js”></i>
     <span class=”num” data-val=”219″>000</span>
     <span class=”text”>Javascript Project</span>
  </div>
 
  <div class=”container”>
     <i class=”fa-brands fa-bootstrap”></i>
     <span class=”num” data-val=”140″>000</span>
     <span class=”text”>Bootstrap Design</span>
  </div>
 
</div>
 
HTML Output:

Step 2: Design the webpage with CSS

I have designed the webpage using the following CSS codes. Here an image is used in the background of the web page. You can use any background color instead of this image.

 
* {
 padding: 0;
 margin: 0;
 box-sizing: border-box;
 font-family: “Poppins”, sans-serif;
}
 
body {
 background: url(“http://driving-tests.org/wp-content/uploads/2012/03/night-road.jpg” );
 background-repeat: no-repeat;
 background-position: center;
 background-size: cover;
 height: 100vh;
}
 
.wrapper {
 position: absolute;
 width: 80vw;
 transform: translate(-50%, -50%);
 top: 50%;
 left: 50%;
 display: flex;
 justify-content: space-around;
 gap: 10px;}
 
Design the webpage with CSS

Step 3: Basic structure of Counter Up box

(more…)

Continue ReadingResponsive Counter Up Animation using JavaScript
How to Create a Word Counter in JavaScript

How to Create a Word Counter in JavaScript (Free Code)

How to Create a Word Counter in JavaScript

Many times word count needs to be done between different projects. In all these cases, this type of JavaScript Word Counter will help you completely. In this tutorial, you will learn how to create Word Counter JavaScript. 

A lot of times we show character limits or word limits in different input boxes. For example, in the case of Twitter, there is a character limit.

Although I have shared a tutorial before where I have shown how to create a character limit input box. This tutorial will show you how to count words and characters. That means you will see both a project word and a character.

Word Counter JavaScript

Below is a preview that will help you to know how this Word Counter javascript works. Below you will find the required source code. 

To create this JavaScript Word Counter project I first created an input box using HTML and created a display. The input box is created using Textarea. 

Then I designed using CSS. After all, I have implemented this project (word counter HTML code) with the help of JavaScript.

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

As you can see above, I used the background-color blue of a webpage. I made a box on top of it. At the top of the box is a display. This display is divided into two parts. 

In the first part, you can see the information of Word Counter. In the second part, the information of the character counter can be seen. These values ​​will change when I change something in the input box. 

How to Make a Word Counter in JavaScript

This JavaScript Word Counter is very easy to make. I created it with some amount of HTML and some amount of CSS. A little bit of JavaScript has been used to make this counter project work.

The background of this input area is white and the text color is black. A shadow has been used around the box to create a beautiful banner that will further highlight this Word Counter in JavaScript on the webpage.

1. Basic structure of Word Counter

The basic structure of this word counter has been created using the following code. The background color of the webpage is blue.

<div class=”wrapper”>
</div>
* {
 padding: 0;
 margin: 0;
 box-sizing: border-box;
 font-family: “Poppins”, sans-serif;
}
body {
 background-color: #8bc1f7;
}
.wrapper {
 position: absolute;
 width: 75vmin;
 transform: translate(-50%, -50%);
 top: 50%;
 left: 50%;
}
Basic structure of Word Counter

2. Word Counter Result Box (more…)

Continue ReadingHow to Create a Word Counter in JavaScript (Free Code)
Random Quote Generator using JavaScript & CSS

Random Quote Generator using JavaScript & CSS

Random Quote Generator using JavaScript

Javascript Random Quote Generator will basically help you to create a random quote using an API link. You can easily create this kind of simple Quote Generator if you know the basics of HTML, CSS, and javascript.

In this tutorial, I have shown how to create Random Quote Generator using JavaScript. Quote Generator can be made in two ways. In the first case, you will collect all the information from any other third-party source using an API link. Then you can show it in the place of your choice.

You can also manually add all the quota information here. Here I have used the API link. To make this Quote Generator Javascript you must have a basic idea about HTML, CSS, and JavaScript. If you are looking for Premium WordPress Host then you can use JustWP.

Javascript Random Quote Generator

Below I have given a demo that will help you to know how this Random Quote Generator HTML works. If you only want the source code, you can use the download button below the article.

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

First I created a heading on a webpage with a blue background. Then I made a box with a display. Quote, and author’s name can be seen in that display. In the end, there is a button that will generate a different quote every time you click on it.

As I said before, all these quotes are not added manually. It has been collected and brought to other websites using API links.

First I added all the information using HTML and CSS and did the design work. Then I implemented Random Quote Generator using JavaScript.

How to Make a Random Quote Generator Javascript

Here I have used API links on a website. If you want you can use the API link on the website of your choice. There are many websites on the internet that provide such API links.

Below I have shared the complete step-by-step tutorial on how to create Javascript Random Quote Generator. I have shown the possible result of each step with a picture. Which will help you understand what kind of changes may occur after using any code.

Step 1: Design the webpage

I have created the basic structure of this Random Quote Generator using the following codes. Here the background color of the webpage is blue.

<div class=”wrapper”>
</div>
* {
 padding: 0;
 margin: 0;
 box-sizing: border-box;
 font-family: “Poppins”, sans-serif;
}
body {
 background-color: #aed7eb;
}
.wrapper {
 width: 400px;
 position: absolute;
 transform: translate(-50%, -50%);
 top: 50%;
 left: 50%;
}
Design the webpage

Step 2: Add a heading (more…)

Continue ReadingRandom Quote Generator using JavaScript & CSS
How to Make a Responsive Image Slider in HTML CSS

How to Make a Responsive Image Slider in HTML CSS

How to Make a Responsive Image Slider in HTML CSS

If you want to create a Responsive Image Slider then this tutorial will help you completely. Here I have shared a tutorial on creating a Simple Responsive Image Slider HTML CSS and provided the necessary source code.

Earlier I created different types of image sliders. However, this slider has been made fully responsive. This allows you to use it directly for any purpose.

Image slider is used to organize a large number of images on different websites. There are different types of image sliders. In some sliders, the image is changed automatically, in some cases the image has to be changed manually.

There are two buttons for manually changing the image. Although I have previously shared various types of automatic and 3D image sliders in this tutorial.

Responsive Image Slider

Below I have given a preview that will help you to know how it works. Here you will find the complete source code. Although I have been given many more options to get the source code. 

Below the article, you will find a box to copy the source code. There is also a button to download the code.

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

As you can see above, a box has been created on a web page. In it, I have added all the necessary images. Here I have added 4 images. If you want you can increase the number of images of your choice. 

There are two buttons for manually changing the image. Here a border is used around the image and shadows are used to enhance the beauty. Importantly, highlights or indicators have been used here. That is, there are a few small points that will indicate how many numbered images have been opened. 

How to Create Responsive Image Slider 

This design is made with HTML CSS and JavaScript. First added various information and images using HTML. Then I designed it using CSS and made it Responsive. Finally, it is implemented using JavaScript.

I have used four images here so I have used four indicators. The first indicator will be highlighted when the first image is open. And when the second image opens, the second point will be highlighted.

If you want to create this Responsive Image Slider, you need to have a basic idea about HTML CSS, and JavaScript.

Step 1: Basic structure of image slider

The basic structure of Responsive Image Slider has been created first using the following HTML and CSS codes. All images in this area can be seen. 

Slider width: 80% and max-width: 600px used. It also has a 10-pixel white border and box-shadow to enhance its beauty.

<div id=”slider”>
</div>
body{
 background:#e6e6e6;
}
#slider{
 width:80%;
 margin:0px auto;
 margin-top: 100px;
 max-width: 600px;
 position:relative;
 overflow:hidden;
 border: 10px solid white;
 box-shadow:2px 5px 10px rgba(0,0,0,0.4);;
}
Basic structure of image slider

Step 2: Add image to the slider (more…)

Continue ReadingHow to Make a Responsive Image Slider in HTML CSS
How to Create JavaScript Password Generator

How to Create JavaScript Password Generator (Free Code)

How to Create JavaScript Password Generator

If you are a beginner and want to create a JavaScript Password Generator then this tutorial is for you. Here I have shown step-by-step and shared complete information on how to create a password generator using JavaScript. 

JavaScript Password Generator will help you create the password of your choice. Earlier I showed you how to create JavaScript Random Password Generator. However, this design will give you the option to create a password manually.

This simple password generator will help you create the password you want. There are different options and controls. This will allow you to create the password you need.

JavaScript Password Generator

You need JavaScript enabled to view it to make it. Here I have used HTML CSS and some amount of JavaScript.

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

First, a box was created on the webpage. In that box, I first created a display where the generated passwords can be seen. 

Then an input box is created where you can control the width of the password. This means that the number of characters you want to create the password can be controlled by this slider.

Then there are the four smaller boxes. This select box created by the checkbox will help you to further customize your password. There is a button at the end of which clicks on which the password is generated and can be seen in the display.

How to create Password Generator using JavaScript

If you want to create this Password Generator JavaScript then you must have a basic idea about HTML, CSS, and javascript. 

But if you just want the source code then follow the part below the article. But if you are a beginner then follow the tutorial below.

This JavaScript Password Generator has a copy button. When you click on the Generate button, the password will be copied automatically.

1. Make a box on the webpage

I first created an area using the following HTML and CSS codes. In this area, you can see all the information of Password Generator with JavaScript.

<div id=”password-generator”>
</div>

The webpage has been designed using the following code. Here the background color of the webpage is blue.

* {
  box-sizing: border-box;
  font-family: sans-serif;
}
body {
  overflow: hidden;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  text-align: center;
  height: 100vh;
  background: #0976d5;
}
webpage has been designed

I have used the background color of this box as white and width: 500px. Box shadows have been used to enhance beauty.

#password-generator {
  padding: 2rem;
  margin: 0 auto;
  width: 500px;
  border-radius: 3px;
  box-shadow: 0 0 2px #1f1f1f;
  border: 3px solid #d5d4ff;
  position: relative;
  background: white;
  white-space: nowrap;
}
Make a box on the webpage

2. Create a password viewing display (more…)

Continue ReadingHow to Create JavaScript Password Generator (Free Code)
Number Guessing Game Using JavaScript

Number Guessing Game Using JavaScript (Free Code)

Number Guessing Game Using JavaScript

JavaScript Number Guessing Game is a simple JavaScript game for beginners. I have shared many more types of JavaScript game tutorials with you before. However, this design is quite simple. 

This Number Guessing Game JavaScript will basically help you to know how to create JavaScript games. The number guessing game project will help you understand how accurate your input number is. That means there is a number limit here. 

You have to guess any one of those numbers. If your guess number is equal to the number guessed by the game then you will win.

The javascript guessing game is a simple project that will help you to learn more about javascript. If you want to make a JavaScript game for the first time then you can try to make this Number Guessing Game in JavaScript.

Number Guessing Game JavaScript

Below is a demo that will help you get a preview of this number guessing game HTML. Here I have shared step-by-step tutorials and source code. Use the button below the article if you want to download the source code.

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

Has created a box on a web page as you can see above. In which a heading is used first then an input space. You will input the number you guessed in that input space.

Then there is a button that will submit the number you guessed. Then there is a display where you can see the results of this game. Below all is a heading that will help you to know if your input number is correct.

I did not use very complex JavaScript to create this Number Guessing Game JavaScript. If you know something about javascript then you can easily create this number guessing game HTML.

How To Make Number Guessing Game JavaScript

Hopefully watching the demo above has aroused your interest in making this project. To build it you must have a basic idea of ​​HTML CSS JavaScript. 

But if you are a beginner, there is no reason to worry. Here I have shared step-by-step tutorials and shown possible results with pictures after each step.

Step 1: Basic structure of Guessing Game

A basic structure of this project has been created using the following HTML and CSS codes. Basically, I made a box on the web page. 

Here we have used blue as the background color of the webpage and white as the background color of the box. Box min-width: 350px, max-width: 400px used.

<div class=”container”>
</div>
*,
*:before,
*:after{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body{
  height: 100vh;
  background: rgb(23, 99, 196);
}
.container{
  position: absolute;
  width: 50%;
  min-width: 350px;
  max-width: 400px;
  transform: translate(-50%,-50%);
  top: 50%;
  left: 50%;
  background-color: #ffffff;
  padding: 50px 10px;
  border-radius: 5px;
  display: grid;
  justify-items: center;
  font-family: ‘Poppins’,sans-serif;
}
Basic structure of Guessing Game

Step 2: Add a heading in the box (more…)

Continue ReadingNumber Guessing Game Using JavaScript (Free Code)