Friday, 25 December 2020

Custom Toggle Switch using CSS

Custom Toggle Switch using CSS


Download : Code

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>Custom Toggle Switch using CSS</title>
  </head>
  <body>
    <div class="box">
      <input type="checkbox" name="" id="">
      <div class="circle">

      </div>
    </div>
  </body>
</html>

style.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
  background: black;
}
.box{
  width: 120px;
  height: 60px;
  border: 4px solid #252525;
  border-radius: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
input{
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
  outline: none;
  -webkit-appearance:none;
}
.circle{
  position: absolute;
  top:2px;
  left: 2px;
  width: 48%;
  height: 48px;
  background: rgb(48, 48, 48);
  border-radius: 50px;
  z-index: -1;
  transition: all .5s;
}
.circle::before{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 10px;
  height: 10px;
  background: rgb(85, 85, 85);
  border-radius: 50px;
  transition: all 0.5s;
}
input:checked ~ .circle{
  transform: translateX(100%);
}
input:checked ~ .circle::before{
  background: #ffff00;
  box-shadow: 0 0 50px 3px #ffff00;
}

Download - Code



at No comments:
Labels: , ,

Tuesday, 22 December 2020

Custom Cursor Using HTML CSS & JS

Custom Cursor Using HTML CSS & JS


Download : Code

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>Custom Cursor</title>
  </head>
  <body>
    <div class="cursor">

    </div>
    <script type="text/javascript">
      const cursor=document.querySelector(".cursor");
      document.addEventListener("mousemove",e=>{
        cursor.setAttribute("style","top:"+e.pageY +"px;left:"+e.pageX +"px;")
      });
      document.addEventListener("click",()=>{
        cursor.classList.add("new");
        setTimeout(()=>{
          cursor.classList.remove("new");
        },500)
      })
    </script>
  </body>
</html>

style.css

*{
  margin: 0;
  padding: 0;
}
body{
  margin: 0;
  height: 100vh;
  background: black;
  cursor: none;
}
.cursor{
position: absolute;
width: 10px;
height: 10px;
border: 4px solid rgba(255, 255, 255,0.623);
border-radius: 50%;
}
.cursor::before{
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(255, 255, 255, 0.301);
  border-radius: 50%;
  animation: animl 0.5s linear infinite;
}
@keyframes animl {
  0%,100%{
    transform: scale(1);
  }
  50%{
    transform: scale(3);
  }
}
.new{
  animation: anim 0.5s forwards;
  border: 4px solid rgba(255, 0, 0, 0.692);
}
@keyframes anim {
  0%,100%{
    transform: scale(0);
  }
  50%{
    transform: scale(1.5);
  }
}



Download - Code

at No comments:
Labels: , ,

Saturday, 12 December 2020

Button With Hover Effect

Button With Hover Effect


Download : Code

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>Button With Hover Effect</title>
  </head>
  <body>
    <div class="main">
      <button class="btn">CLICK ME</button>
    </div>
  </body>
</html>

style.css

*{
  margin: 0;
  padding: 0;
}
.main{
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: black;
}
.btn{
  width: 200px;
  height: 60px;
  font-size: 1.0rem;
  font-family: 'Courier New', Courier, monospace;
  font-weight: 700;
  cursor: pointer;
  border: none;
  position: relative;
  color: white;
  z-index: 0;
  border: 1px solid #892cdc;
  background: black;
  overflow: hidden;
}
.btn:hover::before{
  top: 0px;
  border-radius: 0;
}
.btn::before{
  content: '';
  position: absolute;
  top: 60px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: #892cdc;
  border-radius: 50% 50% 0% 0;
  z-index: -1;
  transition: all 0.5s;
}



Download - Code



at No comments:
Labels: , ,

Sunday, 6 December 2020

Rain Animation with Lighting Effect

Rain Animation with Lighting Effect


index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>Rain Animation with Lighting Effect</title>
  </head>
  <body>
    <div class="rain">
      
    </div>
  </body>
</html>

style.css

body{
  margin: 0;
  padding: 0;
  background: url(background.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}
.rain{
  height: 100vh;
  background: url(rain.png);
  animation: rain .5s linear infinite;
}
.rain::before{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: #fff;
  animation: lighting .3s linear infinite;
  opacity: 0;
}
@keyframes rain {
  0%{
    background-position: 0% 0%;
  }
  100%{
    background-position: 20% 100%;
  }
}
@keyframes lighting {
  0%{
    opacity: 0;
  }
  10%{
    opacity: 0;
  }
  11%{
    opacity: 1;
  }
  14%{
    opacity: 0;
  }
  20%{
    opacity: 0;
  }
  21%{
    opacity: 1;
  }
  24%{
    opacity: 0;
  }
  104%{
    opacity: 0;
  }
}


Download - Code 

Download - Full Code
at No comments:
Labels: , ,
Subscribe to: Comments (Atom)

Donate