Profile Card with Hover Animation in HTML CSS & JavaScript

Hello readers, Today in this blog you’ll learn how to create an Animated Profile Card with Hover Animation using HTML CSS & JavaScript.
What is a card, exactly? Well, they come in all sorts of shapes and sizes, but common cards will include information or content such as a title, a user name, a picture, and various icons. Sometimes there might be a brief amount of text, for example, product or client description.
Today in this video, I’ll share with you this program (Profile Card UI Design with Hover Animation). At first, on the webpage, there is only an image with round border-color. But when you hover on that card, then the height and width of the card smoothly expand and show the contents of the card. I have also added transition-delay on social media buttons so the buttons will appear one by one.

If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
   
    <title>Profile Card Hover Animation | VikasTech</title>
    <link rel="stylesheet" href="blog.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="wrapper">
        <a href="#">
          <img src="profile.png" alt="">
        </a>
        <div class="title">
Praveen Kumar</div>
<div class="place">
patna, Bihar</div>
</div>
<div class="content">
        <p>
User Interface Designer and <br>front-end developer</p>
<div class="buttons">
          <div class="btn">
            <button>Message</button>
          </div>
<div class="btn">
            <button>Following</button>
          </div>
</div>
</div>
<div class="icons">
<li><a href="#"><span class="fab fa-facebook-f"></span></a></li>
<li><a href="#"><span class="fab fa-twitter"></span></a></li>
<li><a href="#"><span class="fab fa-instagram"></span></a></li>
</div>
</div>
<script src="script.js"></script>
  </body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
body{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins',sans-serif;
  padding: 50px;
  text-align: center;
}
.container{
  height: 250px;
  width: 250px;
  overflow: hidden;
  margin: 0 auto;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.3);
  background: linear-gradient(45deg, #7b00e0, #ae31d9);
}
.container:hover{
  height: 470px;
  width: 350px;
  border-radius: 5px;
  box-shadow: 0px 1px 35px 0px rgba(0,0,0,0.3);
}
.container .wrapper img{
  position: relative;
  z-index: 20;
  border-radius: 50%;
  display: block;
  height: 200px;
  width: 200px;
  border: 5px solid #fff;
  object-fit: cover;
  margin: 20px auto;
  transition: all 0.3s ease;
}
.container:hover .wrapper img.active{
  height: 470px;
  width: 350px;
  margin: 0px auto;
  border: none;
  border-radius: 5px;
}
.wrapper .title{
  color: #fff;
  font-size: 30px;
  font-weight: 500;
  padding: 10px;
  line-height: 25px;
}
.wrapper .place{
  color: #fff;
  font-size: 17px;
  line-height: 0px;
  margin: 10px 0;
}
.content{
  color: #fff;
  font-size: 17px;
  margin-top: 10px;
  padding: 1px 20px 10px 20px!important;
}
.content .buttons{
  display: flex;
}
.buttons .btn{
  height: 40px;
  width: 150px;
  margin: 0 5px;
}
.buttons .btn button{
  height: 100%;
  width: 100%;
  background: #fff;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 17px;
  font-weight: 500;
  border-radius: 5px;
  transition: all 0.3s;
}
.btn button:hover{
  transform: scale(0.95);
}
.container .icons{
  position: relative;
  margin-top: -435px;
  margin-left: 10px;
  list-style: none;
}
.container .icons.active{
  display: none;
}
.container .icons li{
  height: 40px;
  width: 40px;
  margin: 5px 0;
  opacity: 0;
  margin-left: -100px;
  transition: all 0.5s ease;
}
.container:hover .icons li{
  opacity: 1;
  margin-left: 7px;
}
.container:hover .icons li:nth-child(2){
  transition-delay: 0.2s;
}
.container:hover .icons li:nth-child(3){
  transition-delay: 0.4s;
}
.container .icons li a{
  color: #7b00e0;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  background: #fff;
  display: block;
  line-height: 40px;
  transition: all 0.3s;
}
.container .icons li a:hover{
  transform: scale(0.9);
}

JS

 const img = document.querySelector("img");
      const icons = document.querySelector(".icons");
      img.onclick = function(){
        this.classList.toggle("active");
        icons.classList.toggle("active");
      }

3D Flip Card on Hover using HTML & CSS

Hello readers, Today in this blog you’ll learn how to create a 3D Card Flip Card on Hover in HTML & CSS.
What is a card, accurately? Well, they come in all sorts of shapes and sizes, but common cards will include information such as a title, a user name, a picture, and several icons. Sometimes there might be a brief volume of text, for example, a product summary.

Today in this blog I’ll share with you this program (3D Flip Card on Hover using HTML & CSS). At first, this card in the initial stage where there is no 3D animation or effect but when you hover on this card it rotates 180deg with 3D visualization. In this card, there are two faces (front and back face). At first, there are shown a front face but when you hover on it then it rotates with 3D visualization and shown back face.

If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
   
    <title>3D Flip Card</title>
    <link rel="stylesheet" href="blog.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  </head>
  <body>
    <div class="center">
      <div class="front-face">
        <div class="contents front">
          <p>
Praveen Kumar</p>
<span>patna, Bihar</span>
        </div>
</div>
<div class="back-face">
        <div class="contents back">
          <h2>
VikashTech</h2>
<span>Follow Me</span>
          <div class="icons">
            <i class="fab fa-facebook-f"></i>
            <i class="fab fa-twitter"></i>
            <i class="fab fa-instagram"></i>
            <i class="fab fa-linkedin-in"></i>
          </div>
</div>
</div>
</div>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Montserrat:600&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  height: 100vh;
  font-family: 'Montserrat', sans-serif;
  background: linear-gradient(45deg,#d8f2f3 0%,#ebf9f9 100%);
}
.center,.front-face,
.contents,.back-face{
  position: absolute;
}
.center{
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 400px;
  width: 290px;
  transform-style: preserve-3d;
 perspective: 1000px;
}
.front-face, .back-face{
  height: 100%;
  width: 100%;
  text-align: center;
  background: linear-gradient(rgba(0,0,0,.2),
              rgba(0,0,0,.2)),url(logo.jpg);
  background-size: cover;
  background-position: center;
  transform: translateY(0deg);
  border-radius: 10px;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.4,.2,.2,1);
}
.contents{
  left: 0%;
  top: 50%;
  width: 100%;
  perspective: 1000px;
  transform: translateY(-50%) translateZ(60px) scale(0.94);
}
.front p{
  font-size: 35px;
  margin-bottom: 15px;
  color: white;
}
.front span{
  font-size: 23px;
  color: white;
}
.front p:after{
  content: '';
  display: block;
  left: 0;
  right: 0;
  width: 100px;
  height: 2px;
  background: white;
  margin: 0 auto;
  margin-top: 10px;
}
.back-face{
  transform: rotateY(180deg);
  background: linear-gradient(45deg,#043348 0%,#032535 100%);
}
.back {
  color: white;
}
.back h2{
  font-size: 33px;
  padding-bottom: 5px;
}
.back span{
  font-size: 25px;
}
.icons{
  margin: 10px 0;
  display: block;
}
i.fab{
  color:  #042f4b;
  font-size: 20px;
  height: 40px;
  width: 40px;
  background: white;
  border-radius: 50%;
  margin: 0 5px;
  line-height: 40px;
  cursor: pointer;
}
.center:hover > .back-face{
  transform: rotateY(0deg);
}
.center:hover > .front-face{
  transform: rotateY(-180deg);
}

Pure CSS Responsive Cards Design with Hover Effect

Hello readers, Today in this blog you’ll learn how to create Responsive Cards with Hover Effect in HTML & CSS only.
Maybe you know what is a card on the website. If you don’t know about this, Often cards are used to organize listings of blog posts, products, services, etc. Section with border and content and take margin from another one they are cards.
As you can see in the image, this is a pure CSS card with a hover effect. you can see there are three cards, icons, buttons, and some dummy texts. These cards are fully responsive with the help of CSS @media property. To create these Cards, I used simple and easy HTML CSS codes which help the beginner to understand easily.

If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    
    <title>Responsive Cards</title>
    <link rel="stylesheet" href="blog.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div class="cards">
      <h2 class="header">
Responsive Cards CSS</h2>
<div class="services">
        <div class="content content-1">
          <div class="fab fa-twitter">
</div>
<h2>
Twitter</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita ullam aliquid non eligendi, nemo est neque reiciendis error?</p>
<a href="#">Read More</a>
        </div>
<div class="content content-2">
          <div class="fab fa-instagram">
</div>
<h2>
Instagram</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita ullam aliquid non eligendi, nemo est neque reiciendis error?</p>
<a href="#">Read More</a>
        </div>
<div class="content content-3">
          <div class="fab fa-youtube">
</div>
<h2>
Youtube</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita ullam aliquid non eligendi, nemo est neque reiciendis error?</p>
<a href="#">Read More</a>
        </div>
</div>
</div>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800|Poppins&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Montserrat',sans-serif;
}
.cards{
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  padding: 30px;
}
.cards h2.header{
  font-size: 40px;
  margin: 0 0 30px 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.services{
  display: flex;
  align-items: center;
}
.content{
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  margin: 20px;
  padding: 20px;
  border: 2px solid black;
  border-radius: 4px;
  transition: all .3s ease;
}
.content .fab{
  font-size: 70px;
  margin: 16px 0;
}
.content > *{
  flex: 1 1 100%;
}
.content:hover{
  color: white;
}
.content:hover a{
  border-color: white;
  background: white;
}
.content-1:hover{
  border-color: #1DA1F2;
  background: #1DA1F2;
}
.content-1:hover a{
  color: #1DA1F2;
}
.content-2:hover{
  border-color: #E1306C;
  background: #E1306C;
}
.content-2:hover a{
  color: #E1306C;
}
.content-3:hover{
  border-color: #ff0000;
  background: #ff0000;
}
.content-3:hover a{
  color: #ff0000;
}
.content h2{
  font-size: 30px;
  margin: 16px 0;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.content p{
  font-size: 17px;
  font-family: 'Poppins',sans-serif;
}
.content a{
  margin: 22px 0;
  background: black;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid black;
  padding: 15px 0;
  border-radius: 25px;
  transition: .3s ease;
}
.content a:hover{
  border-radius: 4px;
}
@media (max-width: 900px) {
  .services{
    display: flex;
    flex-direction: column;
  }
}

CSS3 – Neumorphism Pagination Design

Hello readers, Today in this blog you’ll learn how to create a CSS3 Neumorphism Pagination using only HTML & CSS.
Pagination is the process of splitting the contents of a website, or a part of contents from a website, into discrete pages. Pagination is helpful when the website includes lots of content on a single page, that a single page will not look good with all those topics together. Nowadays, Neumorphism design is a trend and most of the websites are based on this neomorphic effect.
In this program (CSS3 – Neumorphism Pagination Design), at first, there is pagination on the webpage and when you click on each button there is shown a neomorphic shadow effect which indicates to the user that this tab is currently active. This pagination design is simple and there is no advanced features because this is a pure CSS program and I didn’t use JavaScript but I used jQuery to make pagination buttons clickable.

If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">

    <!-- <title>Neumorphism Pagination | VikashTech</title> -->
    <link rel="stylesheet" href="blog.css">
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  </head>
  <body>
    <div class="container">
      <ul class="pagination">
<li><a href="#">Previous</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">Next</a></li>
</ul>
</div>
<script>
      $("li").click(function(){
        $(this).addClass("active").siblings().removeClass("active");
      });
    </script>

  </body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  text-align: center;
  background: #dde1e7;
}
.container{
  background: #dde1e7;
  padding: 25px;
  border-radius: 3px;
  box-shadow: -3px -3px 7px #ffffff73,
              3px 3px 5px rgba(94,104,121,0.288);
}
.pagination{
  display: flex;
  list-style: none;
}
.pagination li{
  flex: 1;
  margin: 0px 5px;
  background: #dde1e7;
  border-radius: 3px;
  box-shadow: -3px -3px 7px #ffffff73,
               3px 3px 5px rgba(94,104,121,0.288);
}
.pagination li a{
  font-size: 18px;
  text-decoration: none;
  color: #4D3252;
  height: 45px;
  width: 55px;
  display: block;
  line-height: 45px;
}
.pagination li:first-child a{
  width: 120px;
}
.pagination li:last-child a{
  width: 100px;
}
.pagination li.active{
  box-shadow: inset -3px -3px 7px #ffffff73,
              inset 3px 3px 5px rgba(94,104,121,0.288);
}
.pagination li.active a{
  font-size: 17px;
  color: #6f6cde;
}
.pagination li:first-child{
  margin: 0 15px 0 0;
}
.pagination li:last-child{
  margin: 0 0 0 15px;
}

Awesome Pagination Design in HTML & CSS

Hello readers, Today in this blog you’ll learn how to create Awesome Pagination Design using only HTML & CSS. Pagination is the method of dividing the contents of a website, into discrete pages.
In this program (Pagination Design), there is a white pagination container with some texts and a gradient background-color as you have seen in the image. And in the container, there is pagination with the ten buttons. When you click on the particular button there is a box-shadow effect to indicates you a button is clicked or not. This is a pure CSS program that means only HTML & CSS are used to create this Pagination.

If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    
    <title>Pagination Design | VikashTech</title>
    <link rel="stylesheet" href="blog.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="title">
Pagination Design</div>
<p>
Awesome pagination design in HTML and CSS only.</p>
<ul class="pagination">
<li class="icon"><a href="#">
          <span class="fas fa-angle-left"></span>
          Previous</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li class="icon"><a href="#">
          Next<span class="fas fa-angle-right"></span>
        </a></li>
</ul>
</div>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  width: 100%;
  place-items: center;
  text-align: center;
  background: linear-gradient(147deg,#f6b323 0%, #f23b26 74%);
}
::selection{
  color: #fff;
  background: #f23b26;
}
.container{
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 30px;
  box-shadow: 0px .5vh 5px 0px rgba(0,0,0,0.25);
}
.container .title{
  font-size: 50px;
  font-weight: 600;
}
.container p{
  font-size: 19px;
}
.pagination{
  margin: 25px 0 15px 0;
}
.pagination,
.pagination li a{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.pagination li{
  background: #f23b26;
  list-style: none;
}
.pagination li a{
  text-decoration: none;
  color: #fdfdfd;
  height: 50px;
  width: 50px;
  font-size: 18px;
  padding-top: 1px;
  border: 1px solid rgba(0,0,0,0.25);
  border-right-width: 0px;
  box-shadow: inset 0px 1px 0px 0px rgba(255,255,255,0.35);
}
.pagination li:last-child a{
  border-right-width: 1px;
}
.pagination li a:hover{
  background: rgba(255,255,255,0.2);
  border-top-color: rgba(0,0,0,0.35);
  border-bottom-color: rgba(0,0,0,0.5);
}
.pagination li a:focus,
.pagination li a:active{
  padding-top: 4px;
  border-left-width:1px;
  background: rgba(255,255,255, 0.15);
  box-shadow: inset 0px 2px 1px 0px rgba(0,0,0,.25);
}
.pagination li.icon a{
  min-width: 120px;
}
.pagination li:first-child span{
  padding-right: 8px;
}
.pagination li:last-child span{
  padding-left: 8px;
}

Custom Warning Alert Notification using HTML CSS & JavaScript

Hello readers, Today in this blog you’ll learn how to create a Custom Warning Alert Notification using HTML CSS & JavaScript.
A notification is a message, email, icon, or another symbol that appears when an application wants you to pay attention. The notifications are a method to let you know that something new has happened. The notifications are a method to let you know that something new has happened so you don’t miss anything that might be worth your attention and appears whether you are using an application or not. And an alert notification appears when an application wants to warn you for something.
In this program (Custom Warning Alert Notification), at first, on the webpage, there is a button only but when you click on that button then the alert notification appears on the right top corner. This notification hides automatically after five seconds and there is also a cross-sign button to hide that notification.
If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
   
    <title>Warning Alert Notification | VikasTech</title>
    <link rel="stylesheet" href="blog.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
  </head>
  <body>
    <button>Show Alert</button>
    <div class="alert hide">
        <span class="fas fa-exclamation-circle"></span>
        <span class="msg">Warning: This is a warning alert!</span>
        <div class="close-btn">
          <span class="fas fa-times"></span>
        </div>
</div>
<script>
      $('button').click(function(){
        $('.alert').addClass("show");
        $('.alert').removeClass("hide");
        $('.alert').addClass("showAlert");
        setTimeout(function(){
          $('.alert').removeClass("show");
          $('.alert').addClass("hide");
        },5000);
      });
      $('.close-btn').click(function(){
        $('.alert').removeClass("show");
        $('.alert').addClass("hide");
      });
    </script>

  </body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  user-select: none;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  height: 100%;
}
body{
  display: grid;
  place-items: center;
  overflow: hidden;
}
button{
  padding: 8px 16px;
  font-size: 25px;
  font-weight: 500;
  border-radius: 4px;
  border: none;
  outline: none;
  background: #e69100;
  color: white;
  letter-spacing: 1px;
  cursor: pointer;
}
.alert{
  background: #ffdb9b;
  padding: 20px 40px;
  min-width: 420px;
  position: absolute;
  right: 0;
  top: 10px;
  border-radius: 4px;
  border-left: 8px solid #ffa502;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.alert.showAlert{
  opacity: 1;
  pointer-events: auto;
}
.alert.show{
  animation: show_slide 1s ease forwards;
}
@keyframes show_slide {
  0%{
    transform: translateX(100%);
  }
  40%{
    transform: translateX(-10%);
  }
  80%{
    transform: translateX(0%);
  }
  100%{
    transform: translateX(-10px);
  }
}
.alert.hide{
  animation: hide_slide 1s ease forwards;
}
@keyframes hide_slide {
  0%{
    transform: translateX(-10px);
  }
  40%{
    transform: translateX(0%);
  }
  80%{
    transform: translateX(-10%);
  }
  100%{
    transform: translateX(100%);
  }
}
.alert .fa-exclamation-circle{
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #ce8500;
  font-size: 30px;
}
.alert .msg{
  padding: 0 20px;
  font-size: 18px;
  color: #ce8500;
}
.alert .close-btn{
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  background: #ffd080;
  padding: 20px 18px;
  cursor: pointer;
}
.alert .close-btn:hover{
  background: #ffc766;
}
.alert .close-btn .fas{
  color: #ce8500;
  font-size: 22px;
  line-height: 40px;
}

Popup Subscription Form using HTML CSS & Javascript

Hello readers, Today in this blog you’ll learn how to create a Popup Subscription Form or Modal Box using HTML CSS & Javascript.
An email subscription is an option on a website that allows visitors to receive news and updates through email by specifying their email addresses in a subscription form.
As you can see in the image, this is a Popup Email Subscription Form based on HTML CSS & Javascript. At first, there is only a button shown but when you clicked on that button then this subscription form will appear. There is a smooth sliding effect too that’ means when you clicked on the button this form will slide from the top side.

If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
   
    <title>Sliding Modal Box Style</title>
    <link rel="stylesheet" href="blog.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
  <body>
    <div class="start-btn">
      <a href="#">View Modal</a>
    </div>
<div class="center modal-box">
      <div class="fas fa-times">
</div>
<div class="fas fa-envelope icon1">
</div>
<header>Don't miss updates from us!</header>
      <p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, suscipit, pers</p>
<form action="">
        <div class="fas fa-envelope icon2">
</div>
<input type="email" required placeholder="info@vikashtech.com">
        <button>Subscribe</button>
      </form>
<div class="icons">
        <i class="fab fa-facebook-f"></i>
        <i class="fab fa-twitter"></i>
        <i class="fab fa-instagram"></i>
        <i class="fab fa-youtube"></i>
      </div>
</div>
<script>
      $(document).ready(function(){
        $('.start-btn').click(function(){
          $('.modal-box').toggleClass("show-modal");
          $('.start-btn').toggleClass("show-modal");
        });
        $('.fa-times').click(function(){
          $('.modal-box').toggleClass("show-modal");
          $('.start-btn').toggleClass("show-modal");
        });
      });
    </script>

  </body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Lobster+Two:700|Poppins&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  text-align: center;
  background: #44d1ee;
  font-family: 'Poppins',sans-serif;
}
::selection{
  color: white;
  background: #48DBFB;
}
.center,.start-btn{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.start-btn a{
  font-size: 25px;
  background: white;
  color: #48DBFB;
  padding: 10px 15px;
  border-radius: 5px;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
  box-shadow: 5px 5px 15px rgba(0,0,0,.1);
}
.modal-box{
  top: 40%;
  opacity: 0;
  visibility: hidden;
  background: white;
  height: auto;
  width: 400px;
  padding: 30px;
  border-radius: 5px;
  border: 1px solid #50dcfb;
  box-shadow: 5px 5px 30px rgba(0,0,0,.2);
}
.start-btn.show-modal{
  opacity: 0;
  visibility: hidden;
}
.modal-box.show-modal{
  top: 50%;
  opacity: 1;
  visibility: visible;
  transition: .4s;
}
.modal-box .fa-times{
  position: absolute;
  top: 0;
  right: 0;
  background: #48DBFB;
  height: 45px;
  width: 50px;
  line-height: 40px;
  color: white;
  font-size: 18px;
  border-radius: 0 5px 0 50px;
  padding-left: 13px;
  cursor: pointer;
}
.fa-times:hover{
  font-size: 22px;
}
.modal-box .icon1{
  font-size: 60px;
  background: #48DBFB;
  height: 120px;
  width: 120px;
  color: white;
  border-radius: 50%;
  line-height: 120px;
  text-align: center;
  margin-bottom: 10px;
}
.modal-box header{
  font-size: 31px;
  font-family: 'Lobster Two';
  margin-bottom: 10px;
}
.modal-box p{
  /* margin-bottom: 10px; */
  line-height: 20px;
  color: grey;
}
form input, form button{
  height: 50px;
  width: 95%;
  border-radius: 3px;
}
form .icon2{
  position: absolute;
  height: 50px;
  width: 50px;
  margin-top: 15px;
  background: #48DBFB;
  color: white;
  line-height: 50px;
  font-size: 24px;
  border-radius: 5px 0 0 5px;
}
form input{
  margin-top: 15px;
  padding: 0 65px;
  font-size: 18px;
  outline: none;
  border: 2px solid #1ed2fa;
  caret-color: #48DBFB;
}
input::placeholder{
  color: #8c8c8c;
}
form input:focus{
  box-shadow: 0 0 15px #82e6fc,
              0 0 25px #b4f0fd,
              0 0 35px #ffffff;
}
form button{
  margin-top: 15px;
  background: #48DBFB;
  color: white;
  font-size: 25px;
  border: 1px solid #1ed2fa;
  letter-spacing: 1px;
  cursor: pointer;
  outline: none;
  transition: .3s;
}
form button:hover{
  background: #1ed2fa;
  border: 1px solid #05cdfa;
  letter-spacing: 2px;
}
.modal-box .icons{
  margin-top: 25px;
}
.icons i{
  font-size: 22px;
  margin: 0 7px;
  color: #48DBFB;
  cursor: pointer;
}
.icons i:hover{
  transform: scale(1.1);
  color: #05cdfa;
}

Custom Modal Box using HTML CSS & Javascript

Hello readers, Today in this blog you’ll learn how to create a Dialog or Modal Box using HTML CSS & Javascript.
Maybe you have seen many types of modal boxes on many websites, Some peoples describe this is as a Dialog box also. For example, when we log out from Facebook there a confirmation appears to are you sure, that’s called dialog modal box.
As you can see in the image, this is a Dialog or Modal Box. In the image, there are some texts, icons, and one close button. The modal box appears on button click that’s a function handled by jQuery. When you click on the show modal button the modal box will be shown from the right bottom side.

If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar -->
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
   
    <title>Custom Modal Box | VikashTech</title>
    <link rel="stylesheet" href="blog.css">
    <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  </head>
  <body>
    <div class="show-btn">
      <button>Show Modal</button>
    </div>
<div class="modal">
      <div class="top-content">
        <div class="left-text">
Modal Box</div>
<span class="close-icon"><i class="fas fa-times"></i></span>
        <div class="fas fa-camera-retro">
</div>
</div>
<div class="bottom-content">
        <div class="text">
Custom Modal Box</div>
<p>
Create a simple modal box using html and css only.</p>
<div class="close-btn">
          <button>Close Modal</button>
        </div>
</div>
</div>
<script>
      $('.show-btn').click(function(){
        $('.modal').toggleClass("show");
        $('.show-btn').addClass("disabled");
      });
      $('.close-icon').click(function(){
        $('.modal').toggleClass("show");
        $('.show-btn').removeClass("disabled");
      });
      $('.close-btn').click(function(){
        $('.modal').toggleClass("show");
        $('.show-btn').removeClass("disabled");
      });
    </script>
  </body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins',sans-serif;
}
body{
  background: #f2f2f2;
  text-align: center;
  overflow: hidden;
}
.show-btn{
  position: absolute;
  top: 50%;
  left: 50%;
  user-select: none;
  transform: translate(-50%, -50%);
}
.show-btn.disabled{
  pointer-events: none;
}
.modal{
  position: absolute;
  right: 0;
  opacity: 0;
  bottom: -100%;
  width: 360px;
  transition: bottom 0.4s, opacity 0.4s;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.3);
}
.modal.show{
  bottom: 0;
  opacity: 1;
}
.modal .top-content{
  background: #34495e;
  width: 100%;
  padding: 0 0 30px 0;
}
.top-content .left-text{
  text-align: left;
  padding: 10px 15px;
  font-size: 18px;
  color: #f2f2f2;
  font-weight: 500;
  user-select: none;
}
.top-content .close-icon{
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 23px;
  color: silver;
  cursor: pointer;
}
.close-icon:hover{
  color: #b6b6b6;
}
.top-content .fa-camera-retro{
  font-size: 80px;
  color: #f2f2f2;
}
.modal .bottom-content{
  background: white;
  width: 100%;
  padding: 15px 20px;
}
.bottom-content .text{
  font-size: 28px;
  font-weight: 600;
  color: #34495e;
}
.bottom-content p{
  font-size: 18px;
  line-height: 27px;
  color: grey;
}
.bottom-content .close-btn{
  padding: 15px 0;
}
.show-btn button,
.close-btn button{
  padding: 9px 13px;
  background: #27ae60;
  border: none;
  outline: none;
  font-size: 18px;
  text-transform: uppercase;
  border-radius: 3px;
  color: #f2f2f2;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.show-btn button{
  padding: 12px 15px;
}
.show-btn button:hover,
.close-btn button:hover{
  background: #26a65b;
}

Neumorphism Profile Card UI Design using only HTML & CSS

Hello readers, Today in this blog you’ll learn how to create Neumorphism Profile Card UI Design using only HTML & CSS.
A profile card is a card that carries saved profile content. Profile Cards let you select profile values consistently over all items on your website. Neumorphism, or soft UI, is a visible style that mixes background colors, shapes, gradients, highlights, and shadows.
In this program [Neumorphism Profile Card UI Design], there is a profile card with a neomorphic effect. This card contains a profile image, social media buttons, and some social media info. When you hover on particular social media buttons, there is shown a neomorphic effect. This card is fully based on HTML & CSS.

If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar - www.vikashtech.com -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Neumorphism Profile Card | VikashTech</title>
    <link rel="stylesheet" href="blog.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
  <div class="wrapper">
    <div class="img-area">
      <div class="inner-area">
        <img src="https://images.unsplash.com/photo-1492288991661-058aa541ff43?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
      </div>
    </div>
    <div class="icon arrow"><i class="fas fa-arrow-left"></i></div>
    <div class="icon dots"><i class="fas fa-ellipsis-v"></i></div>
    <div class="name">Praveen Kumar</div>
    <div class="about">Designer & Developer</div>
    <div class="social-icons">
      <a href="#" class="fb"><i class="fab fa-facebook-f"></i></a>
      <a href="#" class="twitter"><i class="fab fa-twitter"></i></a>
      <a href="#" class="insta"><i class="fab fa-instagram"></i></a>
      <a href="#" class="yt"><i class="fab fa-youtube"></i></a>
    </div>
    <div class="buttons">
      <button>Message</button>
      <button>Subscribe</button>
    </div>
    <div class="social-share">
      <div class="row">
        <i class="far fa-heart"></i>
        <i class="icon-2 fas fa-heart"></i>
        <span>20.4k</span>
      </div>
      <div class="row">
        <i class="far fa-comment"></i>
        <i class="icon-2 fas fa-comment"></i>
        <span>14.3k</span>
      </div>
      <div class="row">
        <i class="fas fa-share"></i>
        <span>12.8k</span>
      </div>
    </div>
  </div>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #ecf0f3;
}
.wrapper,
.wrapper .img-area,
.social-icons a,
.buttons button{
  background: #ecf0f3;
  box-shadow: -3px -3px 7px #ffffff,
               3px 3px 5px #ceced1;
}
.wrapper{
  position: relative;
  width: 350px;
  padding: 30px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.wrapper .icon{
  font-size: 17px;
  color: #31344b;
  position: absolute;
  cursor: pointer;
  opacity: 0.7;
  top: 15px;
  height: 35px;
  width: 35px;
  text-align: center;
  line-height: 35px;
  border-radius: 50%;
  font-size: 16px;
}
.wrapper .icon i{
  position: relative;
  z-index: 9;
}
.wrapper .icon.arrow{
  left: 15px;
}
.wrapper .icon.dots{
  right: 15px;
}
.wrapper .img-area{
  height: 150px;
  width: 150px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-area .inner-area{
  height: calc(100% - 25px);
  width: calc(100% - 25px);
  border-radius: 50%;
}
.inner-area img{
  height: 100%;
  width: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.wrapper .name{
  font-size: 23px;
  font-weight: 500;
  color: #31344b;
  margin: 10px 0 5px 0;
}
.wrapper .about{
  color: #44476a;
  font-weight: 400;
  font-size: 16px;
}
.wrapper .social-icons{
  margin: 15px 0 25px 0;
}
.social-icons a{
  position: relative;
  height: 40px;
  width: 40px;
  margin: 0 5px;
  display: inline-flex;
  text-decoration: none;
  border-radius: 50%;
}
.social-icons a:hover::before,
.wrapper .icon:hover::before,
.buttons button:hover:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: 50%;
  background: #ecf0f3;
  box-shadow: inset -3px -3px 7px #ffffff,
              inset 3px 3px 5px #ceced1;
}
.buttons button:hover:before{
  z-index: -1;
  border-radius: 5px;
}
.social-icons a i{
  position: relative;
  z-index: 3;
  text-align: center;
  width: 100%;
  height: 100%;
  line-height: 40px;
}
.social-icons a.fb i{
  color: #4267B2;
}
.social-icons a.twitter i{
  color: #1DA1F2;
}
.social-icons a.insta i{
  color: #E1306C;
}
.social-icons a.yt i{
  color: #ff0000;
}
.wrapper .buttons{
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.buttons button{
  position: relative;
  width: 100%;
  border: none;
  outline: none;
  padding: 12px 0;
  color: #31344b;
  font-size: 17px;
  font-weight: 400;
  border-radius: 5px;
  cursor: pointer;
  z-index: 4;
}
.buttons button:first-child{
  margin-right: 10px;
}
.buttons button:last-child{
  margin-left: 10px;
}
.wrapper .social-share{
  display: flex;
  width: 100%;
  margin-top: 30px;
  padding: 0 5px;
  justify-content: space-between;
}
.social-share .row{
  color: #31344b;
  font-size: 17px;
  cursor: pointer;
  position: relative;
}
.social-share .row::before{
  position: absolute;
  content: "";
  height: 100%;
  width: 2px;
  background: #e0e6eb;
  margin-left: -25px;
}
.row:first-child::before{
  background: none;
}
.social-share .row i.icon-2{
  position: absolute;
  left: 0;
  top: 50%;
  color: #31344b;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}
.row:nth-child(1):hover i.fa-heart,
.row:nth-child(2):hover i.fa-comment{
  opacity: 1;
  pointer-events: auto;
}

Neumorphism Keyboard Design using only HTML & CSS

Hello readers, Today in this blog you’ll learn how to a Neumorphism Keyboard using only HTML & CSS.
Neumorphism (aka neomorphic) is a comparatively new design trend and a term that’s made a good amount of buzz lately. It’s aesthetic is signalized by minimal and real-looking UI that’s kind of a new take on skeuomorphism.
In this program (Neumorphism Keyboard Design), on the webpage, there is only a keyboard with a neomorphic effect. This is a pure CSS program that means this keyboard is created using only HTML & CSS for design purposes so these keyboard keys don’t work that means when you click on the specific key there is only shown a neomorphic effect. If you want to display the data on a particular key press, you need to add JavaScript for that.

If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    
    <title>Custom Keyboard Design | CodingNepal</title>
    <link rel="stylesheet" href="blog.css">
  </head>
  <body>
    <div class="container">
      <div class="wrapper">
        <div class="keys">
          <input type="button" value="Q">
          <input type="button" value="W">
          <input type="button" value="E">
          <input type="button" value="R">
          <input type="button" value="T">
          <input type="button" value="Y">
          <input type="button" value="U">
          <input type="button" value="I">
          <input type="button" value="O">
          <input type="button" value="P">
        </div>
<div class="keys">
          <input type="button" value="A">
          <input type="button" value="S">
          <input type="button" value="D">
          <input type="button" value="F">
          <input type="button" value="G">
          <input type="button" value="H">
          <input type="button" value="J">
          <input type="button" value="K">
          <input type="button" value="L">
        </div>
<div class="keys">
          <input type="button" value="Z">
          <input type="button" value="X">
          <input type="button" value="C">
          <input type="button" value="V">
          <input type="button" value="B">
          <input type="button" value="N">
          <input type="button" value="M">
        </div>
<div class="keys">
          <input type="button" value="SPACE">
        </div>
</div>
</div>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #dde1e7;
  /* background: #131419; */
  flex-direction: column;
}
.container{
  width: 60%;
}
.wrapper{
  min-width: 750px;
  max-width: 1000px;
  padding: 25px;
  border-radius: 10px;
  background: #dde1e7;
  box-shadow: -3px -3px 7px #ffffff73,
               2px 2px 5px rgba(94,104,121,0.288);
  /* background: #131419; */
  /* box-shadow: 2px 2px 5px rgba(0,0,0,0.5),
              -3px -3px 7px rgba(255,255,255,0.05); */
}
.wrapper .keys{
  display: flex;
  justify-content: center;
}
.wrapper .keys input{
  height: 50px;
  min-width: 50px;
  padding: 10px;
  border: none;
  outline: none;
  background: #dde1e7;
  box-shadow: -3px -3px 7px #ffffff73,
               2px 2px 5px rgba(94,104,121,0.288);
  /* background: #131419; */
  /* box-shadow: 2px 2px 5px rgba(0,0,0,0.5),
              -3px -3px 7px rgba(255,255,255,0.05); */
  margin: 10px;
  color: grey;
  /* color: #c7c7c7; */
  font-size: 20px;
  border-radius: 5px;
  cursor: default;
}
.wrapper .keys input:focus{
  font-size: 19px;
  color: #3498db;
  box-shadow: inset -3px -3px 7px #ffffff73,
              inset 2px 2px 5px rgba(94,104,121,0.288);
  /* box-shadow: inset 2px 2px 5px rgba(0,0,0,0.5),
              inset -3px -3px 7px rgba(255,255,255,0.05); */
}
.wrapper .keys input[value="SPACE"]{
  width: 60%;
}

Working Analog Clock using HTML CSS & Javascript

Hello readers, Today in this blog you’ll learn how to build a Working Analog Clock using HTML CSS & Javascript
A clock or watch is called “analog” when it has moving hands and (normally) hours marked from 1 to 12 to show you the time. Some have Roman Numerals (I, II, III, etc) instead, or no numbers at all.
As you can see in the image, this is an Analog Clock which is based in HTML CSS & Javascript. There are 12 marks for showing times 1 to 12 and 3 handles for showing minutes, hours, and second. As usually, the hour handle is small, and minute handle in bigger than that, and the second handle larger overall.

If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Neumorphism Analog Clock | VikashTech</title>
    <link rel="stylesheet" href="blog.css">
  </head>
  <body>
    <div class="clock">
      <div class="center-nut">
</div>
<div class="center-nut2">
</div>
<div class="indicators">
        <div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>
<div class="sec-hand">
        <div class="sec">
</div>
</div>
<div class="min-hand">
        <div class="min">
</div>
</div>
<div class="hr-hand">
        <div class="hr">
</div>
</div>
</div>
<script>
      const sec = document.querySelector(".sec");
      const min = document.querySelector(".min");
      const hr = document.querySelector(".hr");
      setInterval(function(){
        let time  = new Date();
        let secs = time.getSeconds() * 6;
        let mins = time.getMinutes() * 6;
        let hrs = time.getHours() * 30;
        sec.style.transform = `rotateZ(${secs}deg)`;
        min.style.transform = `rotateZ(${mins}deg)`;
        hr.style.transform = `rotateZ(${hrs+(mins/12)}deg)`;
      });
    </script>
  </body>
</html>

CSS

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,body{
  height: 100%;
}
body{
  display: grid;
  place-items: center;
  background: #dde1e7;
  text-align: center;
}
.clock{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #dde1e7;
  height: 250px;
  width: 250px;
  border-radius: 50%;
  box-shadow: -3px -3px 7px #ffffff73,
              3px 3px 5px rgba(94,104,121,0.288);
}
.clock:before{
  position: absolute;
  content: '';
  height: 220px;
  width: 220px;
  background: #dde1e7;
  border-radius: 50%;
  box-shadow: inset -3px -3px 7px #ffffff73,
              inset 3px 3px 5px rgba(94,104,121,0.288);
}
.clock:after{
  position: absolute;
  content: '';
  height: 120px;
  width: 120px;
  background: #dde1e7;
  border-radius: 50%;
  box-shadow: -1px -1px 5px #ffffff73,
              1px 1px 3px rgba(94,104,121,0.288);
}
.clock .center-nut{
  height: 15px;
  width: 15px;
  background: #404040;
  border-radius: 50%;
  z-index: 2;
  position: absolute;
}
.clock .center-nut2{
  height: 9px;
  width: 9px;
  background: #3498db;
  border-radius: 50%;
  z-index: 15;
  position: absolute;
}
.indicators div{
  position: absolute;
  width: 2px;
  height: 5px;
  background: #404040;
}
.indicators div:nth-child(1){
  transform: rotate(30deg) translateY(-100px);
}
.indicators div:nth-child(2){
  transform: rotate(60deg) translateY(-100px);
}
.indicators div:nth-child(3){
  background: #3498db;
  transform: rotate(90deg) translateY(-100px);
}
.indicators div:nth-child(4){
  transform: rotate(120deg) translateY(-100px);
}
.indicators div:nth-child(5){
  transform: rotate(150deg) translateY(-100px);
}
.indicators div:nth-child(6){
  background: #3498db;
  transform: rotate(180deg) translateY(-100px);
}
.indicators div:nth-child(7){
  transform: rotate(210deg) translateY(-100px);
}
.indicators div:nth-child(8){
  transform: rotate(240deg) translateY(-100px);
}
.indicators div:nth-child(9){
  background: #3498db;
  transform: rotate(270deg) translateY(-100px);
}
.indicators div:nth-child(10){
  transform: rotate(300deg) translateY(-100px);
}
.indicators div:nth-child(11){
  transform: rotate(330deg) translateY(-100px);
}
.indicators div:nth-child(12){
  background: #3498db;
  transform: rotate(360deg) translateY(-100px);
}
.sec-hand,.min-hand,.hr-hand{
  position: absolute;
}
.sec-hand, .sec{
  height: 180px;
  width: 180px;
  z-index: 6;
}
.min-hand, .min{
  height: 140px;
  width: 140px;
  z-index: 5;
}
.hr-hand, .hr{
  height: 110px;
  width: 110px;
  z-index: 4;
}
.sec,.min,.hr{
  display: flex;
  justify-content: center;
  position: absolute;
}
.sec:before{
  position: absolute;
  content: '';
  height: 110px;
  width: 3px;
  background: #3498db;
}
.sec:after{
  position: absolute;
  content: '';
  height: 35px;
  width: 7px;
  background: #3498db;
  top: 105px;
  border-radius: 5px;
}
.min:before{
  position: absolute;
  content: '';
  width: 1px;
  top: -15px;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-bottom: 60px solid #e95949;
}
.min:after{
  position: absolute;
  content: '';
  width: 3px;
  top: 40px;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  border-top: 30px solid #e95949;
}
.hr:before{
  position: absolute;
  content: '';
  width: 1px;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-bottom: 35px solid #303030;
}
.hr:after{
  position: absolute;
  content: '';
  width: 3px;
  top: 34px;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  border-top: 25px solid #303030;
}

Digital Clock with Colorful Glowing Effect using HTML CSS & JavaScript

Hello readers, Today in this blog you’ll learn how to create a Working Digital Clock with Colorful Glowing Effect using HTML CSS & JavaScript.
A digital clock or watch in which the hours, minutes, and sometimes seconds are indicated by digits, as opposed to an analog clock, where the time is indicated by the positions of rotating hands.
In this program (Digital Clock with Colorful Glowing Effect), on the webpage, there is a digital clock which is displaying the real-time with a colorful gradient glowing background and text effect. Generally, this clock takes real-time from our pcs/computers not from the server and show on the webpage. Using Javascript new Date() method I fetched real-time from my current PC.

If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
   
    <title>Digital Clock with Glowing Effect | VikashTech</title>
    <link rel="stylesheet" href="blog.css">
  </head>
  <body>
    <div class="wrapper">
      <div class="display">
        <div id="time">
</div>
</div>
<span></span>
      <span></span>
    </div>
<script>
      setInterval(()=>{
        const time = document.querySelector(".display #time");
        let date = new Date();
        let hours = date.getHours();
        let minutes = date.getMinutes();
        let seconds = date.getSeconds();
        let day_night = "AM";
        if(hours > 12){
          day_night = "PM";
          hours = hours - 12;
        }
        if(seconds < 10){
          seconds = "0" + seconds;
        }
        if(minutes < 10){
          minutes = "0" + minutes;
        }
        if(hours < 10){
          hours = "0" + hours;
        }
        time.textContent = hours + ":" + minutes + ":" + seconds + " "+ day_night;
      });
    </script>

  </body>
</html>

CSS

*{
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  background: #000;
}
.wrapper{
  height: 100px;
  width: 360px;
  position: relative;
  background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);
  border-radius: 10px;
  cursor: default;
  animation: animate 1.5s linear infinite;
}
.wrapper .display,
.wrapper span{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.wrapper .display{
  z-index: 999;
  height: 85px;
  width: 345px;
  background: #1b1b1b;
  border-radius: 6px;
  text-align: center;
}
.display #time{
  line-height: 85px;
  color: #fff;
  font-size: 50px;
  font-weight: 600;
  letter-spacing: 1px;
  background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: animate 1.5s linear infinite;
}
@keyframes animate {
  100%{
    filter: hue-rotate(360deg);
  }
}
.wrapper span{
  height: 100%;
  width: 100%;
  border-radius: 10px;
  background: inherit;
}
.wrapper span:first-child{
  filter: blur(7px);
}
.wrapper span:last-child{
  filter: blur(20px);
}

Glowing Effects on CSS Buttons using HTML & CSS

Hello readers, Today in this blog you’ll learn how to create a Glowing Effect on Buttons in HTML & CSS only.
As you can see in the image, there is a button with a cool border glowing effect. At first, the button is in the initial stage where there are no glowing effects on the background. But when you hover on the button then the glowing effect starts. This effect fully based on CSS only.

If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Glowing Button on Hover</title>
    <link rel="stylesheet" href="blog.css">
  </head>
  <body>
    <button>Hover Me</button>

  </body>
</html>

CSS

@import url("https://fonts.googleapis.com/css?family=Raleway:300");
*{
  margin: 0;
  padding: 0;
}
body{
  display: flex;
  height: 100vh;
  background: black;
  align-items: center;
  justify-content: center;
}
button{
  position: relative;
  height: 60px;
  width: 200px;
  border: none;
  outline: none;
  color: white;
  background: #111;
  cursor: pointer;
  border-radius: 5px;
  font-size: 18px;
  font-family: 'Raleway', sans-serif;
}
button:before{
  position: absolute;
  content: '';
  top: -2px;
  left: -2px;
  height: calc(100% + 4px);
  width: calc(100% + 4px);
  border-radius: 5px;
  z-index: -1;
  opacity: 0;
  filter: blur(5px);
  background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
  background-size: 400%;
  transition: opacity .3s ease-in-out;
  animation: animate 20s linear infinite;
}
button:hover:before{
  opacity: 1;
}
button:hover:active{
  background: none;
}
button:hover:active:before{
  filter: blur(2px);
}
@keyframes animate {
  0% { background-position: 0 0; }
  50% { background-position: 400% 0; }
  100% { background-position: 0 0; }
}

Cool Glowing Effect on Buttons using HTML & CSS

Hello readers, Today in this blog you’ll learn how to create a Cool Glowing Effects on Buttons using only HTML & CSS.
CSS buttons refer to styled HTML buttons that developers customize to match their website designs. You can manipulate the colors, text sizes, padding, and even change styling properties when buttons enter different states.
As you can see in the image, there are two buttons with a glowing effect. These buttons are based on only HTML & CSS. Simply, to create this glow effect I moved two or more colors smoothly with some blur effects.

If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="blog.css">
  </head>
  <body>
    <div class="buttons">
      <button>Hover Me</button>
      <button>Hover Me</button>
    </div>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  background: #000;
  overflow: hidden;
}
button{
  position: relative;
  height: 60px;
  width: 200px;
  margin: 0 35px;
  border-radius: 50px;
  border: none;
  outline: none;
  background: #111;
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.5s;
}
button:first-child:hover{
  background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  background-size: 400%;
}
button:last-child:hover{
  background: linear-gradient(90deg, #fa7199, #f5ce62, #e43603, #fa7199);
  background-size: 400%;
}
button:first-child:before,
button:last-child:before{
  content: '';
  position: absolute;
  background: inherit;
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
  border-radius: 50px;
  filter: blur(20px);
  opacity: 0;
  transition: opacity 0.5s;
}
button:first-child:hover:before,
button:last-child:hover:before{
  opacity: 1;
  z-index: -1;
}
button:hover{
  z-index: 1;
  animation: glow 8s linear infinite;
}
@keyframes glow {
  0%{
    background-position: 0%;
  }
  100%{
    background-position: 400%;
  }
}

Colorful Glowing Effect on Hover using HTML & CSS

Hello readers, Today in this blog you’ll learn how to create a Colorful Glowing Effect on Hover using only HTML & CSS.
As you can in the image, there are two objects with Colorful Glowing Effects. There is a one-button with hover me a text and one loader-circle with the same hover me text. Assuming Those two objects are buttons.
At first, those buttons are in the initial stage where there are no glow effects on it. But when you hover on it, it will be started to glowing in the background.
If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    
    <title>Gradient Color Effect | VikashTech</title>
    <link rel="stylesheet" href="blog.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div class="center">
      <div class="outer button">
        <button>Hover Me</button>
        <span></span>
        <span></span>
      </div>
<div class="outer circle">
        <button>Hover Me</button>
        <span></span>
        <span></span>
      </div>
</div>
</body>
</html>

CSS

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  background: #000;
}
.center{
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}
.outer{
  position: relative;
  margin: 0 50px;
  background: #111;
}
.button{
  height: 70px;
  width: 220px;
  border-radius: 50px;
}
.circle{
  height: 200px;
  width: 200px;
  border-radius: 50%;
}
.outer button, .outer span{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.outer button{
  background: #111;
  color: #f2f2f2;
  outline: none;
  border: none;
  font-size: 20px;
  z-index: 9;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}
.button button{
  height: 60px;
  width: 210px;
  border-radius: 50px;
}
.circle button{
  height: 180px;
  width: 180px;
  border-radius: 50%;
}
.outer span{
  height: 100%;
  width: 100%;
  background: inherit;
}
.button span{
  border-radius: 50px;
}
.circle span{
  border-radius: 50%;
}
.outer:hover span:nth-child(1){
  filter: blur(7px);
}
.outer:hover span:nth-child(2){
  filter: blur(14px);
}
.outer:hover{
  background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);
  animation: rotate 1.5s linear infinite;
}
@keyframes rotate {
  0%{
    filter: hue-rotate(0deg);
  }
  100%{
    filter: hue-rotate(360deg);
  }
}
@media (max-width: 640px){
  .center{
    flex-wrap: wrap;
    flex-direction: column;
  }
  .outer{
    margin: 50px 0;
  }
}

Social Media Buttons with Tooltip on Hover using only HTML & CSS

Hello readers, Today in this blog you’ll learn how to create the Social Media Buttons with Tooltip on Hover using only HTML & CSS.
The Social Media Buttons allow your website visitors and content viewers to easily share your content with their social media connections and networks. A tooltip is a short, informative message that appears when a user interacts with an element.
In this program (Social Media Buttons with Tooltip), at first, on the webpage, there are five social media buttons – Facebook, Twitter, Instagram, Github, and YouTube. When you hover on a particular button or icon then the tooltip appears with sliding animation and the background color of a button also changes with the default icon color. Inside tooltip, there is the name of a particular hovered social media icon as you have seen in the image.

If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
  
    <title>Social Media Buttons with Tooltip | VikashTech</title>
    <link rel="stylesheet" href="blog.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  </head>
  <body>
    <div class="wrapper">
      <div class="icon facebook">
        <div class="tooltip">
Facebook</div>
<span><i class="fab fa-facebook-f"></i></span>
      </div>
<div class="icon twitter">
        <div class="tooltip">
Twitter</div>
<span><i class="fab fa-twitter"></i></span>
      </div>
<div class="icon instagram">
        <div class="tooltip">
Instagram</div>
<span><i class="fab fa-instagram"></i></span>
      </div>
<div class="icon github">
        <div class="tooltip">
Github</div>
<span><i class="fab fa-github"></i></span>
      </div>
<div class="icon youtube">
        <div class="tooltip">
YouTube</div>
<span><i class="fab fa-youtube"></i></span>
      </div>
</div>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  width: 100%;
  place-items: center;
  background: linear-gradient(315deg, #ffffff 0%, #d7e1ec 74%);
}
.wrapper{
  display: inline-flex;
}
.wrapper .icon{
  margin: 0 20px;
  text-align: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  z-index: 2;
  transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon span{
  display: block;
  height: 60px;
  width: 60px;
  background: #fff;
  border-radius: 50%;
  position: relative;
  z-index: 2;
  box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
  transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon span i{
  line-height: 60px;
  font-size: 25px;
}
.wrapper .icon .tooltip{
  position: absolute;
  top: 0;
  z-index: 1;
  background: #fff;
  color: #fff;
  padding: 10px 18px;
  font-size: 20px;
  font-weight: 500;
  border-radius: 25px;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
  transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon:hover .tooltip{
  top: -70px;
  opacity: 1;
  pointer-events: auto;
}
.icon .tooltip:before{
  position: absolute;
  content: "";
  height: 15px;
  width: 15px;
  background: #fff;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%) rotate(45deg);
  transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon:hover span{
  color: #fff;
}
.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip{
  text-shadow: 0px -1px 0px rgba(0,0,0,0.4);
}
.wrapper .facebook:hover span,
.wrapper .facebook:hover .tooltip,
.wrapper .facebook:hover .tooltip:before{
  background: #3B5999;
}
.wrapper .twitter:hover span,
.wrapper .twitter:hover .tooltip,
.wrapper .twitter:hover .tooltip:before{
  background: #46C1F6;
}
.wrapper .instagram:hover span,
.wrapper .instagram:hover .tooltip,
.wrapper .instagram:hover .tooltip:before{
  background: #e1306c;
}
.wrapper .github:hover span,
.wrapper .github:hover .tooltip,
.wrapper .github:hover .tooltip:before{
  background: #333;
}
.wrapper .youtube:hover span,
.wrapper .youtube:hover .tooltip,
.wrapper .youtube:hover .tooltip:before{
  background: #DE463B;
}

CSS3 – 3D Layered Hover Effect on Social Media Buttons

Hello readers, Today in this blog you’ll learn how to create 3D Layered Hover Effect on Social Media Buttons using only HTML & CSS.
These social media links and buttons allow your website visitors and content viewers to easily share your content with their social media connections and networks. A social media share link is a URL that when clicked populates a fixed message and image that can be shared on social media.
Today in this blog I’ll share with you this program about Social Media Buttons with 3D Layered Hover Effects. At first, on the webpage, these buttons are in the initial stage where there is no 3D Layered effect and icon names are also hidden at first. But when you hover on the particular social icon then that icon rotates and visible the layers of icons that visualize 3D Effect as well as texts, are also visible with sliding down.

If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>3D Layered Hover Effect | VikashTech</title>
    <link rel="stylesheet" href="blog.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  </head>
  <body>
    <div class="icons">
      <a href="#">
        <div class="layer">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span class="fab fa-facebook-f"></span>
        </div>
<div class="text">
Facebook</div>
</a>
      <a href="#">
        <div class="layer">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span class="fab fa-twitter"></span>
        </div>
<div class="text">
Twitter</div>
</a>
      <a href="#">
        <div class="layer">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span class="fab fa-instagram"></span>
        </div>
<div class="text">
Instagram</div>
</a>
      <a href="#">
        <div class="layer">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span class="fab fa-linkedin-in"></span>
        </div>
<div class="text">
Linkedin</div>
</a>
      <a href="#">
        <div class="layer">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span class="fab fa-youtube"></span>
        </div>
<div class="text">
YouTube</div>
</a>
    </div>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  background: #000;
}
.icons{
  display: inline-flex;
}
.icons a{
  margin: 0 25px;
  text-decoration: none;
  color: #fff;
  display: block;
  position: relative;
}
.icons a .layer{
  width: 55px;
  height: 55px;
  transition: transform 0.3s;
}
.icons a:hover .layer{
  transform: rotate(-35deg) skew(20deg);
}
.icons a .layer span{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border: 1px solid #fff;
  border-radius: 5px;
  transition: all 0.3s;
}
.icons a .layer span.fab{
  font-size: 30px;
  line-height: 55px;
  text-align: center;
}
.icons a:hover .layer span:nth-child(1){
  opacity: 0.2;
}
.icons a:hover .layer span:nth-child(2){
  opacity: 0.4;
  transform: translate(5px, -5px);
}
.icons a:hover .layer span:nth-child(3){
  opacity: 0.6;
  transform: translate(10px, -10px);
}
.icons a:hover .layer span:nth-child(4){
  opacity: 0.8;
  transform: translate(15px, -15px);
}
.icons a:hover .layer span:nth-child(5){
  opacity: 1;
  transform: translate(20px, -20px);
}
.icons a:nth-child(1) .layer span,
.icons a:nth-child(1) .text{
  color: #4267B2;
  border-color: #4267B2;
}
.icons a:nth-child(2) .layer span,
.icons a:nth-child(2) .text{
  color: #1DA1F2;
  border-color: #1DA1F2;
}
.icons a:nth-child(3) .layer span,
.icons a:nth-child(3) .text{
  color: #E1306C;
  border-color: #E1306C;
}
.icons a:nth-child(4) .layer span,
.icons a:nth-child(4) .text{
  color: #2867B2;
  border-color: #2867B2;
}
.icons a:nth-child(5) .layer span,
.icons a:nth-child(5) .text{
  color: #ff0000;
  border-color: #ff0000;
}
.icons a:hover:nth-child(1) .layer span{
  box-shadow: -1px 1px 3px #4267B2;
}
.icons a:hover:nth-child(2) .layer span{
  box-shadow: -1px 1px 3px #1DA1F2;
}
.icons a:hover:nth-child(3) .layer span{
  box-shadow: -1px 1px 3px #E1306C;
}
.icons a:hover:nth-child(4) .layer span{
  box-shadow: -1px 1px 3px #2867B2;
}
.icons a:hover:nth-child(5) .layer span{
  box-shadow: -1px 1px 3px #ff0000;
}
.icons a .text{
  position: absolute;
  left: 50%;
  bottom: -5px;
  opacity: 0;
  font-weight: 500;
  transform: translateX(-50%);
  transition: bottom 0.3s ease, opacity 0.3s ease;
}
.icons a:hover .text{
  bottom: -35px;
  opacity: 1;
}

Animated Gradient Shiny Loader with HTML CSS & JavaScript

Hello readers, Today in this blog you’ll learn how to create an Animated Gradient Shiny Loader or Preloader in HTML CSS & JavaScript. E
Preloaders are what you inspect on the screen while the rest of the page’s content is still loading. Preloaders or loaders are often easy or complex animations that are used to keep visitors entertained while server operations finish processing.

At first, this loader is in the initial stage, where there is a loader and 0% text or number at the center on the webpage. But when you click on that center text or number, the loader will be activated and it starts to rotates as well as the center percentage also starts to increase from 0% to 100%. When it completed 100%, the loader stops to rotating.

If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By Praveen kumar -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Gradient Ring or Loader</title>
    <link rel="stylesheet" href="blog.css">
  </head>
  <body>
    <div class="outer">
</div>
<div class="inner">
      <span>0%</span>
    </div>
<!-- This is Javascript Code -->
    <script>
      let outer = document.querySelector(".outer");
      let inner = document.querySelector(".inner");
      let percent = document.querySelector("span");
      let count = 0;
      inner.addEventListener('click', function(){
        let loading = setInterval(function(){
          if(count == 100){
            outer.classList.remove("active-loader");
            outer.classList.add("active-loader-2");
            clearInterval();
          }else{
            count = count + 1;
            percent.textContent = count + '%';
            outer.classList.add("active-loader");
          }
        },200);
      });
    </script>


    <!-- This is Jquery Code you can use this code also
      instead of Javascript Code -->
      <!-- <script>
        $(document).ready(function(){
          var count = 0;
          $('.inner').click(function(){
            setInterval(function(){
              if(count == 100){
                $('.outer').remove('active');
                $('.outer').addClass('active2');
                clearInterval();
              }else{
                count = count + 1;
                $('span').text(count + '%');
                $('.outer').addClass('active');
              }
            }, 200);
          });
        });
      </script> -->

  </body>
</html>

CSS

html,body{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-family: sans-serif;
  background: #240f52;
  overflow: hidden;
}
.outer{
  height: 300px;
  width: 300px;
  background: linear-gradient(135deg,#FEED07 0%,#FE6A50 5%,#ED00AA 15%,#2FE3FE 50%,#8900FF 100%);
  border-radius: 50%;
}
.inner{
  position: absolute;
  width: 275px;
  height: 275px;
  text-align: center;
  line-height: 275px;
  background: #240f52;
  border-radius: 50%;
  cursor: default;
  /* opacity: 0; */
}
.inner span{
  font-size: 60px;
  font-weight: 800;
  background: linear-gradient(135deg,#FEED07 0%,#FE6A50 5%,#ED00AA 15%,#2FE3FE 50%,#8900FF 100%);
  color: transparent;
  -webkit-background-clip: text;
  background-size: 300%;
}
.outer.active-loader{
  animation: rotate 2s ease infinite;
}
@keyframes rotate {
  to{
    transform: rotate(360deg);
  }
}
.outer.active-loader-2{
  animation: rotate2 3s ease;
}
@keyframes rotate2 {
  to{
    transform: rotate(360deg);
  }
}

Awesome Social Media Buttons with Hover Animation | HTML & CSS

Hello readers, Today in this blog you’ll learn how to create an Awesome Social Media Buttons with Hover Animation using only HTML & CSS.
The Social Icons Widget represents small graphics linked to your social media accounts, in any widget area of your theme. After adding links to your social profiles, icons are automatically represented on your site, giving your visitors connect with you through your preferred social media networks.
In this program (Awesome Social Media Buttons with Hover Animation), at first, on the webpage, there are shown five icons or buttons of different Social Media Networks and when you hover on the particular button then the width of that button expand smoothly and visible the name of particular hovered network. This hover animation is fully created using only HTML & CSS.
If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!-- Somehow I got an error, so I comment the title, just uncomment to show -->
    <!-- <title>Social Media Icons | VikasTech</title> -->
    <link rel="stylesheet" href="blog.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  </head>
  <body>
    <div class="wrapper">
      <div class="button">
        <div class="icon">
<i class="fab fa-facebook-f"></i></div>
<span>Facebook</span>
      </div>
<div class="button">
        <div class="icon">
<i class="fab fa-twitter"></i></div>
<span>Twitter</span>
      </div>
<div class="button">
        <div class="icon">
<i class="fab fa-instagram"></i></div>
<span>Instagram</span>
      </div>
<div class="button">
        <div class="icon">
<i class="fab fa-github"></i></div>
<span>Github</span>
      </div>
<div class="button">
        <div class="icon">
<i class="fab fa-youtube"></i></div>
<span>YouTube</span>
      </div>
</div>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  width: 100%;
  place-items: center;
  background: linear-gradient(315deg, #ffffff 0%, #d7e1ec 74%);
}
.wrapper .button{
  display: inline-block;
  height: 60px;
  width: 60px;
  float: left;
  margin: 0 5px;
  overflow: hidden;
  background: #fff;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
  transition: all 0.3s ease-out;
}
.wrapper .button:hover{
  width: 200px;
}
.wrapper .button .icon{
  display: inline-block;
  height: 60px;
  width: 60px;
  text-align: center;
  border-radius: 50px;
  box-sizing: border-box;
  line-height: 60px;
  transition: all 0.3s ease-out;
}
.wrapper .button:nth-child(1):hover .icon{
  background: #4267B2;
}
.wrapper .button:nth-child(2):hover .icon{
  background: #1DA1F2;
}
.wrapper .button:nth-child(3):hover .icon{
  background: #E1306C;
}
.wrapper .button:nth-child(4):hover .icon{
  background: #333;
}
.wrapper .button:nth-child(5):hover .icon{
  background: #ff0000;
}
.wrapper .button .icon i{
  font-size: 25px;
  line-height: 60px;
  transition: all 0.3s ease-out;
}
.wrapper .button:hover .icon i{
  color: #fff;
}
.wrapper .button span{
  font-size: 20px;
  font-weight: 500;
  line-height: 60px;
  margin-left: 10px;
  transition: all 0.3s ease-out;
}
.wrapper .button:nth-child(1) span{
  color: #4267B2;
}
.wrapper .button:nth-child(2) span{
  color: #1DA1F2;
}
.wrapper .button:nth-child(3) span{
  color: #E1306C;
}
.wrapper .button:nth-child(4) span{
  color: #333;
}
.wrapper .button:nth-child(5) span{
  color: #ff0000;
}