DEV Community: Code with Ayan

Amazing Social Icons Hover Effect in CSS

Code with Ayan — Fri, 22 Jul 2022 22:56:00 +0000

Hello Devs, Today in this post, we’ll learn How to Create an Amazing Social Icons Hover Effect in CSS using HTML and CSS. To create it we are going to use simple CSS & Font Awesome. Hope you enjoy our blog.

Social icons are a very important part of our website. They allow users to quickly share our content across social media sites, expanding users in seconds with just a click.

Even it is a small feature to be implemented; you can be creative with it and make the social icons interactive in a way that adds a unique experience for your users.

Demo

Click to watch demo!

To create Social Icons Hover Effect in CSS we have used Font Awesome to make icons. Hence, you will need a Font Awesome link in your <head> tag. It’s very simple, all you need to do is to log into Font Awesome site and they will provide you with the Kit’s Code.

Social Icons Hover Effect in CSS & HTML (source code)

HTML Code

<!DOCTYPE html>
<html lang="en">
    <head>
         <title>Making Animations</title>
        <link rel="stylesheet" href="Animations.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-                     awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous"/>
    </head>

    <body> 

        <div class="wrapper">
            <div class="button">
                <div class="icon">
                    <a class="fab fa-facebook-f"></a>
                </div>
                <span>Facebook</span>
            </div>
            <div class="button">
                <div class="icon">
                    <a class="fab fa-instagram"></a>   
                </div>
                <span>Instagram</span>
            </div>

            <div class="button">
                <div class="icon">
                    <a class="fab fa-twitter"></a>
                </div>
                <span>Twitter</span>
            </div>

            <div class="button">
                <div class="icon">
                    <a class="fab fa-youtube"></a>
                </div>
                <span>Youtube</span>
            </div>
        </div> 

    </body>
</html>

CSS Code

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
html,body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    background: linear-gradient(315deg, #fff 0%, rgb(245, 245, 245) 74%);
}
.button{
    height: 60px;
    width: 60px;
    background-color: #fff;
    border-radius: 60px;
    cursor: pointer;
    box-shadow: 0 10px 10px rgb(94, 91, 91);
    float: left;
    overflow: hidden;
    transition: all 1s ease-in-out;
}
.button:hover{
    width: 220px;
}

.button:nth-child(1):hover .icon { background: #4267B2;}
.button:nth-child(2):hover .icon { background: #E1306C;}
.button:nth-child(3):hover .icon { background: #1DA1F2;}
.button:nth-child(4):hover .icon { background: #FF0000;}

.button:nth-child(1) span { color: #4267B2;}
.button:nth-child(2) span { color: #E1306C;}
.button:nth-child(3) span { color: #1DA1F2;}
.button:nth-child(4) span { color: #FF0000;}

.button span{
    font-size: 20px;
    font-weight: 500;
    line-height: 60px;
    margin-left: 10px;
}
.button, .icon{
    display: inline-block;
    height: 60px;
    width: 60px;
    text-align: center;
    border-radius: 50px;
}
.button, .icon a{
    font-size: 25px;
    line-height: 60px;
}
.icon{
    float: left;
}

Congratulations! We have now successfully created our Social icons with Hover Effect using CSS.

Don't forget to check out my other amazing CSS and Javascript tutorials:

Cheers!

Simple Login form using HTML and CSS

Code with Ayan — Thu, 21 Jul 2022 22:26:02 +0000

Hello guys, Today in this post we’ll learn How to Create a Simple Login Form using HTML and CSS. Hope you enjoy this post.

A login form is one of the most important component of a website or app that allows authorized users to access an entire site or a part of a website. You would have already seen them when visiting a website. Let's head to create it

Whether it’s a signup form or login form, it should be catchy, user-friendly and easy to use. These types of Forms lead to increased sales, lead generation, and customer growth.

Demo

Click to watch demo!

Simple Login form using HTML CSS (source code)

HTML Code

<!DOCTYPE html>
  <html lang="en" >
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel="stylesheet" href="styledfer.css">
  </head>

  <body>
   <div id="login-form-wrap">
    <h2>Login</h2>
    <form id="login-form">
      <p>
      <input type="email" id="email" name="email" placeholder="Email " required><i class="validation"><span></span><span></span></i>
      </p>
      <p>
      <input type="password" id="password" name="password" placeholder="Password" required><i class="validation"><span></span><span></span></i>
      </p>
      <p>
      <input type="submit" id="login" value="Login">
      </p>

      </form>
    <div id="create-account-wrap">
      <p>Don't have an accout? <a href="#">Create One</a><p>
    </div>
   </div>

  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js'></script>
  </body>
</html>

CSS Code

body {
  background-color: #020202;
  font-size: 1.6rem;
  font-family: "Open Sans", sans-serif;
  color: #2b3e51;
}
h2 {
  font-weight: 300;
  text-align: center;
}
p {
  position: relative;
}
a,
a:link,
a:visited,
a:active {
  color: #ff9100;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
a:focus, a:hover,
a:link:focus,
a:link:hover,
a:visited:focus,
a:visited:hover,
a:active:focus,
a:active:hover {
  color: #ff9f22;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
#login-form-wrap {
  background-color: #fff;
  width: 16em;
  margin: 30px auto;
  text-align: center;
  padding: 20px 0 0 0;
  border-radius: 4px;
  box-shadow: 0px 30px 50px 0px rgba(0, 0, 0, 0.2);
}
#login-form {
  padding: 0 60px;
}
input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  outline: none;
  height: 60px;
  line-height: 60px;
  border-radius: 4px;
}
#email,
#password {
  width: 100%;
  padding: 0 0 0 10px;
  margin: 0;
  color: #8a8b8e;
  border: 1px solid #c2c0ca;
  font-style: normal;
  font-size: 16px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: relative;
  display: inline-block;
  background: none;
}
#email:focus,
#password:focus {
  border-color: #3ca9e2;
}
#email:focus:invalid,
#password:focus:invalid {
  color: #cc1e2b;
  border-color: #cc1e2b;
}
#email:valid ~ .validation,
#password:valid ~ .validation 
{
  display: block;
  border-color: #0C0;
}
#email:valid ~ .validation span,
#password:valid ~ .validation span{
  background: #0C0;
  position: absolute;
  border-radius: 6px;
}
#email:valid ~ .validation span:first-child,
#password:valid ~ .validation span:first-child{
  top: 30px;
  left: 14px;
  width: 20px;
  height: 3px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
#email:valid ~ .validation span:last-child
#password:valid ~ .validation span:last-child
{
  top: 35px;
  left: 8px;
  width: 11px;
  height: 3px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.validation {
  display: none;
  position: absolute;
  content: " ";
  height: 60px;
  width: 30px;
  right: 15px;
  top: 0px;
}
input[type="submit"] {
  border: none;
  display: block;
  background-color: #ff9100;
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  font-size: 18px;
  position: relative;
  display: inline-block;
  cursor: pointer;
  text-align: center;
}
input[type="submit"]:hover {
  background-color: #ff9b17;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

#create-account-wrap {
  background-color: #eeedf1;
  color: #8a8b8e;
  font-size: 14px;
  width: 100%;
  padding: 10px 0;
  border-radius: 0 0 4px 4px;
}

Congratulations! You have now successfully created our Simple Login Form using HTML and CSS.

Wait, Take a look at my other amazing CSS and Javascript tutorials:

Thank you!

Random Password Generator with Javascript | Source Code

Code with Ayan — Wed, 20 Jul 2022 14:08:46 +0000

Hey Devs, Today we’ll learn How to Create a Random Password Generator with Javascript. I hope you enjoy this post.

Javascript Random Password Generator is nowadays much used by many popular and different websites. You could have already seen them when creating an account on a platform. The password created using this app is going to be a very strong password, since it includes keyword combinations like numbers, symbols, uppercase, and lowercase alphabets.

The password is going to be random and unique so it will not be an easy to guess. Here, I have used JavaScript's Math.floor and Math.random method to create the app. When generate button will be clicked. The different types of loops will create different passwords each time.

Demo

Random Password Generator with Javascript | source code
HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div class="box">
      <h2>Random Password Generater</h2>
      <input type="text" name="" placeholder="Password" id="password" readonly>

      <table>
        <th><div id="button" class="btn1"onclick="genPassword()">Generate</div></th>
        <th><a  id="button" class="btn2" onclick="copyPassword()">Copy</a></th>
      </table>
    </div>

    <script src="script.js"></script>
  </body>
</html>

CSS Code
Lets add some styling using CSS.

* {
    margin: 0;
    padding: 0;
    user-select: none; /*important*/
    box-sizing: border-box;
}
body {
    background-color: #FF8C00 ;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
.box{
  background-color: white;
  padding-top: 30px;
  padding: 30px;
  margin-bottom: 12em;
}
.box h2{
  margin-bottom: 40px;
  text-align: center;
  font-size: 26px;
  color: rgb(219, 99, 0);
  font-family: sans-serif;
}
input {
  padding: 20px;
    user-select: none;
    height: 50px;
    width: 400px;
    border-radius: 6px;
    border: none;
    border: 2px solid #ff9411;
    outline: none;
    font-size: 22px;
}
input::placeholder{
  font-size: 23px;
} 
#button {
    font-family: sans-serif;
    font-size: 15px;

    margin-top: 40px;
    border: 2px solid #ff9411 ;
    width: 155px;
    height: 50px;
    text-align: center;
    background-color: #eb8a13;
    display: flex;
    color: rgb(255, 255, 255);
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 7px;
}
.btn2{
   margin-left: 85px
 }
#button:hover {
    color: white;
    background-color: #db7900
}

JavaScript Code
JavaScript will generate the code when generate button is clicked. In varchars, I have added different numbers, numbers, symbols, etc.

These symbols and numbers associated with each other will create random passwords. Math.random() will help here. The password will show in the input box. Copy button is directly connected to the input. It will copy written text in input box.

JavaScript Code

function genPassword() {
        var chars = "0123456789abcdefghijklmnopqrstuvwxyz!@#$%^&*()ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        var passwordLength = 12;
        var password = "";
        for (var i = 0; i <= passwordLength; i++) {
            var randomNumber = Math.floor(Math.random() * chars.length);
            password += chars.substring(randomNumber, randomNumber +1);
        }
        document.getElementById("password").value = password;
    }
    function copyPassword() {
      var copyText = document.getElementById("password");
      copyText.select();
      copyText.setSelectionRange(0, 999);
      document.execCommand("copy");
      alert("copied to clipboard")
    }

Congratulations! You have now successfully created our Random Password Generator app in Javascript

Take a look at my other amazing CSS and Javascript tutorials:

My Website: codewithayan, see this to checkout all of my amazing Tutorials.

Awesome animated search bar with icon in HTML & CSS

Code with Ayan — Tue, 19 Jul 2022 20:59:44 +0000

Hello Devs, Today we’ll create an Awesome animated search bar with icon using HTML and CSS . To create it you will need a Font awesome kit. Hope you enjoy this post.

A search bar is a very important component of our website. They allow users to easily search for articles available on your blog and help them find out what they are looking for easily, which increases the friendliness of the website to users.

Extending the search box to Hover is an idea that modern websites use nowadays, with placing it in the top navbar of the website to see it easily. Even if it is a small feature to be implemented; you can be creative with it and make the Search bar interactive in a way that adds a good experience for the users.

Demo

Now, as we have seen the demo so let’s head to create this with CSS & HTML. To create animated search bar we have used Font Awesome. Hence, you will need a Font Awesome link in your

tag. It’s very simple, all you need to do is to log into Font Awesome site and they will provide you with the Kit’s Code.

Awesome Animated search bar with icon HTML CSS (source code)

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Animated Search Bar</title>
        <link rel="icon" href="animated.jpg">
        <link rel="stylesheet" href="SearchBar.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous"/>
    </head>

    <body>
        <br>
        <form action="" id="s">
            <input type="search">
            <i class="fa fa-search"></i>
        </form>

    </body>

</html>

CSS Code

body{
    padding: 0;
    margin: 0;
    height: 100vh;
    width: 100%;
    background: #07051a;
}

form{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: all 1s;a
    width: 50px;
    height: 50px;
    background: white; 
    box-sizing: border-box;
    border-radius: 25px;
    border: 4px solid white;
    padding: 5px;
}
input{
    position: absolute;
    width: 100%;
    height: 42.5px;
    line-height: 30px;
    display: none;
    font-size: 1em;
    border-radius: 20px;
    padding: 0 20px;
    top: 0;
    left: 0;
    outline: 0;
    border: 0;
}
.fa{
    box-sizing: border-box;
    padding: 10px;
    width: 42.5px;
    height: 42.5px;
    position: absolute;
    border-radius: 50%;
    color: #07051a;
    text-align: center;
    font-size: 1.2em;
    transition: all 1s;
    top: 0;
    right: 0;
}
form:hover {
    width: 200px;
    cursor: pointer;
}
form:hover input {
    display: block;
}

form:hover .fa {
    background: #07051a;
    color: white;
}

Congratulations! You have now successfully created our Animated search bar with icon.

Make sure to check out my other amazing CSS and Javascript tutorials:

My Website: codewithayan, see this to checkout all of my amazing Tutorials.

Glassmorphism login page in HTML and CSS

Code with Ayan — Sun, 17 Jul 2022 21:49:00 +0000

Hey Devs, Today in this post you’ll learn How to Create a Glassmorphism Login Page in HTML and CSS. Hope you enjoy this post.

Glassmorphism in CSS has been gaining much popularity as a result of its appearance. As the name Glassmorphism itself suggests, its background looks like a glass. It is similar to Login Form but differs in its transparent design. Nowadays, many websites and applications like Apple and Microsoft use this type of design.

These types of classy-interface UI make User Experience better and lead to increased sales, lead generation, and customer growth. You should also use shape psychology to represent your brand as trustworthy and build users' trust in your brand.

Demo

Click to watch demo!

Glassmorphism Login page using CSS (Source Code)

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Design - codewithayan</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous"/>
    <link rel="stylesheet" href="Style.css">
</head>
<body>
    <div class="container">
        <div class="circle"></div>
        <div class="circle"></div>
    </div>

    <form>
        <h2 id="heading">Login</h3>

        <input type="text" placeholder="Email or Phone" id="username">
        <input type="password" placeholder="Password" id="password">

        <button id="btn">Log In</button>

        <div class="social">
            <div class="Google"><i class="fab fa-google"></i>  Google</div>
            <div class="github"><i class="fab fa-github"></i>  Github</div>
        </div>
    </form>
</body>
</html>

CSS Code

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background-color: #000000;
}
.container{
    width: 400px;
    height: 500px;
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
}
.circle{
    height: 174px;
    width: 175px;
    position: absolute;
    border-radius: 50%;
}
.circle:first-child{
    background: linear-gradient(
        #13e000,
        #78ff1e);
    left: -60px;
    top: -80px;
}
.circle:last-child{
    background: linear-gradient(
        to right,
        #ff00b3,
        #ff1fff);
    right: -20px;
    bottom: -80px;
}
form{
    height: 500px;
    width: 370px;
    background-color: rgba(255,255,255,0.13);
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    border-radius: 10px;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255,255,255,0.1);
    box-shadow: 0 0 40px rgba(8,7,16,0.6);
    padding: 50px 35px;
}
form *{
    font-family: 'Poppins',sans-serif;
    color: #ffffff;
    letter-spacing: 0.5px;
    outline: none;
    border: none;
}
#heading{
    font-size: 40px;
    font-weight: 600;
    line-height: 42px;
    text-align: center;
}
input{
    display: block;
    height: 50px;
    width: 100%;
    background-color: rgba(255,255,255,0.07);
    border-radius: 3px;
    padding: 0 10px;
    font-size: 18px;
    margin-top: 40px;
    border: none;
    outline: none;
}
input::placeholder{
    color: #e5e5e5;
}
#btn{
    margin-top: 40px;
    width: 100%;
    background-color: #ffffff;
    color: #080710;
    padding: 15px 0;
    font-size: 18px;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
}

.social{
    margin-top: 28px;
    display: flex;
  }
  .social div{
    width: 150px;
    border-radius: 3px;
    padding: 7px 10px 10px 7px;
    background-color: rgba(255,255,255,0.27);
    color: #eaf0fb;
    text-align: center;
  }
  .social div:hover{
    background-color: rgba(255,255,255,0.47);
  }
.github{
    margin-left: 25px;
  }
  .social i{
    margin-right: 4px;
  }

Congratulations! You have now successfully created our login page using HTML and CSS.

Don't forget to check out my other amazing CSS and Javascript tutorials:
1. Dark Mode Toggle Button in JavaScript (Updated)

My Website: codewithayan, see this to checkout all of my amazing Tutorials.