Simple Social Media Icons Hover Effect with CSS

Simple Social Media Icons Hover Effect with CSS

Social Media Icons hover effect

This is a CSS tutorial where you will learn how to create simple social media icons with a hover effect. The hover or animation effect makes the social button much more interesting. Here a few CSS social buttons have been created and hover colors have been used in them.

Social icons are a common element among different websites or projects. The social media buttons that have been created here use animated hover colors.

Social Media Icons hover effect

This social icon hovers effect is made using only HTML and CSS you can use anywhere. I have added icons using HTML. These social icons have been designed and hovered using CSS.

See the Pen
Social Icon Hover Effect by Shantanu Jana (@shantanu-jana)
on CodePen.

This is a complete tutorial where you can get all the source code, step-by-step tutorials, and live previews. So if you are a beginner then this tutorial will help you a lot. If you want to see the preview then use the demo section above.

Create a Social Media Buttons with CSS

Here five hover effect social icons are used and they are given in the form of a round button. 

Now if you want to make it, you need to have some idea about HTML and CSS. If you are not technical then use the download button directly below the article.

Step 1: HTML code of Social Icons

All social icons have been added by the following HTML code. Here I have used 5 social icons.

<div class=”social-icons”>
   <a class=”social-icon twitter” href=”#”>
      <i class=”fab fa-twitter”></i>
   </a>
   <a class=”social-icon dribbble” href=”#”>
      <i class=”fab fa-dribbble”></i>
   </a>
   <a class=”social-icon facebook” href=”#”>
      <i class=”fab fa-facebook-f”></i>
   </a>
   <a class=”social-icon instagram” href=”#”>
      <i class=”fab fa-instagram”></i>
   </a>
   <a class=”social-icon github” href=”#”>
      <i class=”fab fa-github”></i>
   </a>
</div>

Step 2: Basic design of webpage by CSS (more…)

Continue ReadingSimple Social Media Icons Hover Effect with CSS
Draggable Div Element using JavaScript

Draggable Div Element using JavaScript (Code + Demo)

draggable div javascript

In this article, you will learn how to create javascript draggable div. What is Draggable Div Element?

Basically, it is an element that you can drag anywhere on the web page. We see this kind of draggable element in many large websites or applications.

Elements that can be dragged from one place to another are called javascript draggable div. In the meantime, I have shared how to create a right-click menu using JavaScript.

I have added a profile card to the basic structure of this draggable div javascript. However, you can add any of your information by excluding the profile card.

Draggable Div JavaScript

When we see this type of element in an application, it seems to be a lot standard. However, it is not so difficult. If you want, you can create this kind of Drag and Drop element using some basic HTML CSS and JavaScript.

If you have difficulty understanding what I am saying then follow the preview below. Here you will find a live preview of this Draggable Div Element design and the required source code.

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

As you can see above, I designed a web page. I made a small box on it. Under normal conditions, this box will be in top: 0 and left: 0 positions. 

You can then move it to the angle and position of your choice. I have created a profile card in this element. For the profile, first, we added the profile image, some basic text, and four social media buttons.

How to create draggable div in javascript

Although this profile is not part of the Drag element. I just added the card to add some information. Shared step-by-step tutorials here. For this, you must have some idea about HTML CSS JavaScript.

Step 1: Basic structure of draggable div

First I created the basic structure of the Drag element. Here you can create using a single div if you want. But I have used a div and a header here. 

Div is basically the basic structure and the header is the part where you can drag by clicking. Although the length of the header here is equal to the size of the whole box. So you can move Div Element by clicking on any part of the box.

<div id=”dragable”>
   <header id=”dragzone”>
   </header>
</div>

I have designed the webpage of this project using the following CSS codes. Here a blue color is used in the background of the webpage.

* {
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
html,
body {
height: 100%;
}
body {
background: #78c7ed;
font-family: sans-serif;
}
Basic structure of draggable div

Step 2: Basic design of Div Element

Now the basic structure of the element or the box has been created. Box width: 21rem, height: 21rem, and a light border has been used all around. Shadow has been used here to enhance the beauty.

#dragable {
width: 21rem;
height: 21rem;
border: 0.2rem solid #0f2c65;
border-radius: 0.2rem;
position: absolute;
z-index: 9;
box-shadow: 2px 4px 18px rgba(0, 0, 0, 0.2);
transition: border-color 0.2s, box-shadow 0.2s;
}

Now we will design the header. This is basically where we can click and move the JavaScript Draggable Div Element. Here I have used 100% of the length and height. 

This will allow you to move it by clicking anywhere in the entire box. Cursor: move is used here, so moving the mouse over the box will change the style of the cursor.

#dragable #dragzone {
width: 100%;
height: 100%;
cursor: move;
z-index: 10;
background-color: #0f2c65;
}
Basic design of Div Element

When you click on the box or move it, the style changes a bit. Although it will not work without JavaScript.

#dragable.drag {
border-color: white;
box-shadow: 3px 6px 24px rgba(0, 0, 0, 0.5);
}

Step 3: Activate Draggable Div using JavaScript

Now it’s time to implement this HTML Drag and Drop via JavaScript. It is comparatively much harder. For this, you must have an idea about JavaScript. 

Here we have shared the necessary explanations of the code lines. Hopefully, these codes will not be a problem for you to understand.

 const dragElement = (element, dragzone) => {
    let pos1 = 0,
      pos2 = 0,
      pos3 = 0,
      pos4 = 0;
//MouseUp occurs when the user releases the mouse button
    const dragMouseUp = () => {
      document.onmouseup = null;
//onmousemove attribute fires when the pointer is moving while it is over an element.
      document.onmousemove = null;
      element.classList.remove(“drag”);
    };
    const dragMouseMove = (event) => {
//preventDefault() method cancels the event if it is cancelable
      event.preventDefault();
//clientX property returns the horizontal coordinate of the mouse pointer
      pos1 = pos3 – event.clientX;
//clientY property returns the vertical coordinate of the mouse pointer
      pos2 = pos4 – event.clientY;
      pos3 = event.clientX;
      pos4 = event.clientY;
//offsetTop property returns the top position relative to the parent
      element.style.top = `${element.offsetTop – pos2}px`;
      element.style.left = `${element.offsetLeft – pos1}px`;
    };
    const dragMouseDown = (event) => {
      event.preventDefault();
      pos3 = event.clientX;
      pos4 = event.clientY;
      element.classList.add(“drag”);
      document.onmouseup = dragMouseUp;
      document.onmousemove = dragMouseMove;
    };
    dragzone.onmousedown = dragMouseDown;
  };
  const dragable = document.getElementById(“dragable”),
    dragzone = document.getElementById(“dragzone”);
  dragElement(dragable, dragzone);
Draggable Div using JavaScript

To make this div element draggable complete the work above. Now you can move this element anywhere.

 You can add any information here. Here I have added a profile card. If you want to add a profile card to that draggable element then follow the steps below. Otherwise, skip the steps.

Step 4: Add content to Draggable Element (more…)

Continue ReadingDraggable Div Element using JavaScript (Code + Demo)
How To Create Custom Radio Button Using HTML CSS

How To Create Custom Radio Button Using HTML CSS

Custom Radio Button CSS

If you want to create Custom Radio Button using HTML and CSS then this tutorial will help you completely. customize radio buttons is a common web element that is used in many different places. The input of HTML is created using type = “radio”.

 However, ordinary radio buttons cannot be used everywhere. This radio button needs to be styled to be used for various purposes. Here is a simple radio button using some CSS to make it suitable for interesting and professional use.

Custom Radio Button CSS

3 Radio buttons have been used here. These Custom Radio Buttons are made in the form of small boxes.

Many times one has to choose any one of the many options on the webpage. In that case, there is no alternative to this kind of CSS Radio Button.

See the Pen
Untitled by Shantanu Jana (@shantanu-jana)
on CodePen.

This tutorial will help you to know how to style a radio button. It is designed to be used for a professional purpose. Above is a demo that will help you figure out how it works. Here you will find the required source code and tutorials.

How to Customize radio buttons in CSS

As you can see, three boxes have been created on the webpage. Those boxes are basically radio buttons. You can select these radio buttons. By default, the middle option will be selected. 

You can also select any other option of your choice by clicking on it. It’s a little easier to build with a little bit of HTML and CSS used.

Step 1: Radio Button’s HTML code

below I put all the HTML codes together. Later I designed them with CSS. These select buttons are made in the shape of a box. This box contains some basic information.

<div class=”card”>
  <input type=”radio” name=”pricing” id=”card1″>
  <label for=”card1″>
     <h5>BASIC</h5>
     <h2>
       <span>$</span>
        15
       <span>/month</span>
    </h2>
  </label>
</div>
<div class=”card”>
   <input type=”radio” name=”pricing” id=”card2″ checked>
   <label for=”card2″>
      <h5>STANDARD</h5>
      <h2>
         <span>$</span>
          35
         <span>/month</span>
      </h2>
    </label>
</div>
<div class=”card”>
   <input type=”radio” name=”pricing” id=”card3″>
   <label for=”card3″>
      <h5>PREMIUM</h5>
      <h2>
        <span>$</span>
          120
        <span>/month</span>
      </h2>
  </label>
</div>
Radio Button's HTML code

Step 2: Design webpages with CSS

I designed the webpage using the following code. Light blue is used in the background of the webpage here.

*,
*:before,
*:after{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body{
  background-color: #f5f7ff;
  font-family: ‘Poppins’,sans-serif;
  color: #2c2c51;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
Design webpages with CSS

Step 3: Customize the Radio Button (more…)

Continue ReadingHow To Create Custom Radio Button Using HTML CSS
How to Create a Palindrome Checker in JavaScript

How to Create a Palindrome Checker in JavaScript

Palindrome Checker in JavaScript

If you want to make a javascript palindrome checker tool then this article will help you. This type of palindrome checker is very easy to make. If you know basic JavaScript you can easily create it.

You may be wondering what a palindrome is?

A palindrome is a number, phrase, or word that reads the same backward as forward. That is, if a word or number is read from the front, it will look as if it is read from the back. Such as Madam, Racecar, Level, 12321, etc.

Palindrome Checker JavaScript

The project that has been created here can easily identify this palindrome. This is a javascript palindrome checker that will help you understand whether any word or number is a palindrome.

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

If you do not understand what I am saying then watch the demo below. This demo will help you to know how this palindrome checker javascript works.

Related Post:

1. Check Password Strength in JavaScript

2. Word Counter in JavaScript

3. Days Between Two Dates

4. Character Counter using JavaScript

5. Loan Calculator using JavaScript

6. Weather App using JavaScript

Hopefully, you have learned how this palindrome program works from the preview above. This project has been created in a very simple way. 

There is an input box here. You can input a word or number in that box. Then there is a button. When you click on the button you can see if it is a palindrome. There is a display in which information can be seen.

Build A Palindrome Checker using JavaScript

If you want to create this Palindrome Checker then you need to know HTML, CSS, and javascript. Its elements are created by HTML and designed by CSS. Then, this Palindrome Checker is activated by JavaScript.

Step 1: Basic structure of Palindrome Checker

A box has been created on the webpage using the following code. Here the box’s min-width is 450px and the background color is white.

<div class=”container”>
</div>
*,
*:before,
*:after{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body{
  background-color: #1f85e0;
}
.container{
  width: 35%;
  min-width: 450px;
  background-color: #ffffff;
  padding: 50px 35px;
  position: absolute;
  transform: translate(-50%,-50%);
  left: 50%;
  top: 50%;
  text-align: center;
  border-radius: 8px;
  box-shadow: 0 20px 25px rgba(0,0,0,0.18);
}
Basic structure of Palindrome Checker

Step 2: Create a result viewing display (more…)

Continue ReadingHow to Create a Palindrome Checker in JavaScript