<html lang="en">
<head>
<meta charset="UTF-8">
<title>East dark mode</title>
<style>
body{
margin: 0;
padding: 0;
font-family: sans-serif;
}
main{
margin: 5vh 15%;
}
h1{
font-size: 40px;
font-weight: 400;
text-align: center;
}
img{
width:50%;
height:auto;
}
p{
text-align: justify;
font-size: 18px;
}
label{
position: absolute;
width: 45px;
height: 22px;
right: 20px;
top: 20px;
border: 2px solid;
border-radius: 20px;
}
label:before{
position: absolute;
content: '';
width:20px;
height: 20px;
left: 1px;
top: 1px;
border-radius: 50%;
background: #000;
cursor: pointer;
transition: 0.4s;
}
label.active:before{
left: 24px;
background: #fff;
}
body.night{
background: #000;
color: #fff;
}
@media screen and (min-width:900px) {
.respon{
display: flex;
}
img{
height:50%;
width:auto;
padding-top: 3vh;
padding-right: 5%;
}
p{
max-width: 80%;
line-height: 30px;
}
}
</style>
</head>
<body>
<header>
<label id="dark-change"></label>
</header>
<main>
<h1>Easy dark mode</h1>
<div class="respon">
<img src="darkmode.jpg">
<p>Light-on-dark color scheme, also called dark mode, dark theme or night mode, is a color scheme that uses light-colored text, icons, and graphical user interface elements on a dark background and is often discussed in terms of computer user interface design and web design.</p>
</div>
</main>
<script>
var content = document.getElementsByTagName('body')[0];
var darkMode = document.getElementById('dark-change');
darkMode.addEventListener('click', function(){
darkMode.classList.toggle('active');
content.classList.toggle('night');
})
</script>
</body>
</html>
<head>
<meta charset="UTF-8">
<title>East dark mode</title>
<style>
body{
margin: 0;
padding: 0;
font-family: sans-serif;
}
main{
margin: 5vh 15%;
}
h1{
font-size: 40px;
font-weight: 400;
text-align: center;
}
img{
width:50%;
height:auto;
}
p{
text-align: justify;
font-size: 18px;
}
label{
position: absolute;
width: 45px;
height: 22px;
right: 20px;
top: 20px;
border: 2px solid;
border-radius: 20px;
}
label:before{
position: absolute;
content: '';
width:20px;
height: 20px;
left: 1px;
top: 1px;
border-radius: 50%;
background: #000;
cursor: pointer;
transition: 0.4s;
}
label.active:before{
left: 24px;
background: #fff;
}
body.night{
background: #000;
color: #fff;
}
@media screen and (min-width:900px) {
.respon{
display: flex;
}
img{
height:50%;
width:auto;
padding-top: 3vh;
padding-right: 5%;
}
p{
max-width: 80%;
line-height: 30px;
}
}
</style>
</head>
<body>
<header>
<label id="dark-change"></label>
</header>
<main>
<h1>Easy dark mode</h1>
<div class="respon">
<img src="darkmode.jpg">
<p>Light-on-dark color scheme, also called dark mode, dark theme or night mode, is a color scheme that uses light-colored text, icons, and graphical user interface elements on a dark background and is often discussed in terms of computer user interface design and web design.</p>
</div>
</main>
<script>
var content = document.getElementsByTagName('body')[0];
var darkMode = document.getElementById('dark-change');
darkMode.addEventListener('click', function(){
darkMode.classList.toggle('active');
content.classList.toggle('night');
})
</script>
</body>
</html>
This media is not supported in your browser
VIEW IN TELEGRAM
Эффект Сбоя При Наведении Курсора с Использованием HTML и CSS
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="pic"></div>
</body>
</html>
body{
margin: 0;
padding: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #0f0f0f;
}
.pic{
width: 600px;
height: 400px;
background: url(pic.jpg) no-repeat;
background-size: cover;
cursor: pointer;
position: relative;
overflow: hidden;
}
.pic::before{
content: "";
position: absolute;
width: 600px;
height: 40px;
background: url(pic.jpg) no-repeat;
background-size: cover;
filter: sepia(100%);
opacity: 0;
}
.pic:hover:before{
opacity: .7;
animation: glitch 1.5s infinite linear;
}
@keyframes glitch {
0%{
top: 0;
background-position: 12px 0;
}
20%{
top: 80px;
background-position: -10px -80px;
}
40%{
top: 160px;
background-position: 6px -160px;
}
60%{
top: 240px;
background-position: -6px -240px;
}
80%{
top: 320px;
background-position: 10px -320px;
}
100%{
top: 400px;
background-position: -12px -400px;
}
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="pic"></div>
</body>
</html>
body{
margin: 0;
padding: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #0f0f0f;
}
.pic{
width: 600px;
height: 400px;
background: url(pic.jpg) no-repeat;
background-size: cover;
cursor: pointer;
position: relative;
overflow: hidden;
}
.pic::before{
content: "";
position: absolute;
width: 600px;
height: 40px;
background: url(pic.jpg) no-repeat;
background-size: cover;
filter: sepia(100%);
opacity: 0;
}
.pic:hover:before{
opacity: .7;
animation: glitch 1.5s infinite linear;
}
@keyframes glitch {
0%{
top: 0;
background-position: 12px 0;
}
20%{
top: 80px;
background-position: -10px -80px;
}
40%{
top: 160px;
background-position: 6px -160px;
}
60%{
top: 240px;
background-position: -6px -240px;
}
80%{
top: 320px;
background-position: 10px -320px;
}
100%{
top: 400px;
background-position: -12px -400px;
}
}
This media is not supported in your browser
VIEW IN TELEGRAM
Кнопки Социальных Сетей с Потрясающими Эффектами Наведения #1
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
<body>
<div class="social-buttons">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
</div>
</body>
</html>
body{
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #f1f1f1;
}
.social-buttons a{
display: inline-flex;
text-decoration: none;
font-size: 18px;
width: 60px;
height: 60px;
color: #fff;
justify-content: center;
align-items: center;
position: relative;
margin: 0 8px;
}
.social-buttons a::before{
content: "";
position: absolute;
width: 60px;
height: 60px;
background: linear-gradient(45deg,#22a6b3,#30336b);
border-radius: 50%;
z-index: -1;
transition: 0.3s ease-in;
}
.social-buttons a:hover::before{
transform: scale(0);
}
.social-buttons a i{
transition: 0.3s ease-in;
}
.social-buttons a:hover i{
background: linear-gradient(45deg,#22a6b3,#30336b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transform: scale(2.2);
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
<body>
<div class="social-buttons">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
</div>
</body>
</html>
body{
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #f1f1f1;
}
.social-buttons a{
display: inline-flex;
text-decoration: none;
font-size: 18px;
width: 60px;
height: 60px;
color: #fff;
justify-content: center;
align-items: center;
position: relative;
margin: 0 8px;
}
.social-buttons a::before{
content: "";
position: absolute;
width: 60px;
height: 60px;
background: linear-gradient(45deg,#22a6b3,#30336b);
border-radius: 50%;
z-index: -1;
transition: 0.3s ease-in;
}
.social-buttons a:hover::before{
transform: scale(0);
}
.social-buttons a i{
transition: 0.3s ease-in;
}
.social-buttons a:hover i{
background: linear-gradient(45deg,#22a6b3,#30336b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transform: scale(2.2);
}
Media is too big
VIEW IN TELEGRAM
Кнопки Cоциальных Cетей с Потрясающей Анимацией При Наведении Курсора HTML и CSS №2
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
</head>
<body>
<div class="middle">
<a class="btn" href="#">
<i class="fab fa-facebook-f"></i>
</a>
<a class="btn" href="#">
<i class="fab fa-twitter"></i>
</a>
<a class="btn" href="#">
<i class="fab fa-google"></i>
</a>
<a class="btn" href="#">
<i class="fab fa-instagram"></i>
</a>
<a class="btn" href="#">
<i class="fab fa-youtube"></i>
</a>
</div>
</body>
</html>
body{
padding: 0;
margin: 0;
}
.middle{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
}
.btn{
display: inline-block;
width: 90px;
height: 90px;
background: #f1f1f1;
margin: 10px;
border-radius: 30%;
box-shadow: 0 5px 15px -5px #00000070;
color: #3498db;
overflow: hidden;
position: relative;
}
.btn i{
line-height: 90px;
font-size: 26px;
transition: 0.2s linear;
}
.btn:hover i{
transform: scale(1.3);
color: #f1f1f1;
}
.btn::before{
content: "";
position: absolute;
width: 120%;
height: 120%;
background: #3498db;
transform: rotate(45deg);
left: -110%;
top: 90%;
}
.btn:hover::before{
animation: aaa 0.7s 1;
top: -10%;
left: -10%;
}
@keyframes aaa {
0%{
left: -110%;
top: 90%;
}50%{
left: 10%;
top: -30%;
}100%{
top: -10%;
left: -10%;
}
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
</head>
<body>
<div class="middle">
<a class="btn" href="#">
<i class="fab fa-facebook-f"></i>
</a>
<a class="btn" href="#">
<i class="fab fa-twitter"></i>
</a>
<a class="btn" href="#">
<i class="fab fa-google"></i>
</a>
<a class="btn" href="#">
<i class="fab fa-instagram"></i>
</a>
<a class="btn" href="#">
<i class="fab fa-youtube"></i>
</a>
</div>
</body>
</html>
body{
padding: 0;
margin: 0;
}
.middle{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
}
.btn{
display: inline-block;
width: 90px;
height: 90px;
background: #f1f1f1;
margin: 10px;
border-radius: 30%;
box-shadow: 0 5px 15px -5px #00000070;
color: #3498db;
overflow: hidden;
position: relative;
}
.btn i{
line-height: 90px;
font-size: 26px;
transition: 0.2s linear;
}
.btn:hover i{
transform: scale(1.3);
color: #f1f1f1;
}
.btn::before{
content: "";
position: absolute;
width: 120%;
height: 120%;
background: #3498db;
transform: rotate(45deg);
left: -110%;
top: 90%;
}
.btn:hover::before{
animation: aaa 0.7s 1;
top: -10%;
left: -10%;
}
@keyframes aaa {
0%{
left: -110%;
top: 90%;
}50%{
left: 10%;
top: -30%;
}100%{
top: -10%;
left: -10%;
}
}
This media is not supported in your browser
VIEW IN TELEGRAM
Потрясающие Кнопки Социальных Сетей При Наведении Курсора №3
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
</head>
<body>
<div class="s-m">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-google-plus-g"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
text-decoration: none;
}
body{
background: #f1f1f1;
}
.s-m{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.s-m a{
display: inline-flex;
width: 40px;
height: 40px;
background: #2c3e50;
color: white;
margin: 0 6px;
border-radius: 50%;
justify-content: center;
align-items: center;
transition: 0.4s;
font-size: 22px;
}
.s-m a:hover{
background: #e67e22;
}
.s-m a i{
transition: 0.4s all;
}
.s-m a:hover > i{
transform: scale(1.6) rotate(25deg);
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
</head>
<body>
<div class="s-m">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-google-plus-g"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
text-decoration: none;
}
body{
background: #f1f1f1;
}
.s-m{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.s-m a{
display: inline-flex;
width: 40px;
height: 40px;
background: #2c3e50;
color: white;
margin: 0 6px;
border-radius: 50%;
justify-content: center;
align-items: center;
transition: 0.4s;
font-size: 22px;
}
.s-m a:hover{
background: #e67e22;
}
.s-m a i{
transition: 0.4s all;
}
.s-m a:hover > i{
transform: scale(1.6) rotate(25deg);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script src="https://use.fontawesome.com/d1341f9b7a.js"></script>
<title>SOCIAL MEDIA BUTTONS</title>
</head>
<body>
<div class="s-m">
<a class="fa fa-facebook" href="#"></a>
<a class="fa fa-twitter" href="#"></a>
<a class="fa fa-google-plus" href="#"></a>
<a class="fa fa-youtube" href="#"></a>
<a class="fa fa-linkedin" href="#"></a>
</div>
</body>
</html>
body{
margin: 0;
padding: 0;
background: #f1f1f1;
}
.s-m{
margin: 310px auto;
justify-content: space-around;
display: flex;
max-width: 700px;
}
.s-m a{
text-decoration: none;
font-size: 28px;
color: #f1f1f1;
width: 60px;
height: 60px;
text-align: center;
transition: 0.4s all;
line-height: 58px;
cursor: pointer;
background: #314652;
border-radius: 50%;
}
.s-m a:hover{
transform: scale(1.2);
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script src="https://use.fontawesome.com/d1341f9b7a.js"></script>
<title>SOCIAL MEDIA BUTTONS</title>
</head>
<body>
<div class="s-m">
<a class="fa fa-facebook" href="#"></a>
<a class="fa fa-twitter" href="#"></a>
<a class="fa fa-google-plus" href="#"></a>
<a class="fa fa-youtube" href="#"></a>
<a class="fa fa-linkedin" href="#"></a>
</div>
</body>
</html>
body{
margin: 0;
padding: 0;
background: #f1f1f1;
}
.s-m{
margin: 310px auto;
justify-content: space-around;
display: flex;
max-width: 700px;
}
.s-m a{
text-decoration: none;
font-size: 28px;
color: #f1f1f1;
width: 60px;
height: 60px;
text-align: center;
transition: 0.4s all;
line-height: 58px;
cursor: pointer;
background: #314652;
border-radius: 50%;
}
.s-m a:hover{
transform: scale(1.2);
}
This media is not supported in your browser
VIEW IN TELEGRAM
Замечательные кнопки социальных сетей с использованием HTML, CSS и JQuery №5
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<div class="middle">
<div class="sm-container">
<i class="show-btn fas fa-user"></i>
<div class="sm-menu">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
<a href="#"><i class="fab fa-whatsapp"></i></a>
</div>
</div>
</div>
<script>
$(".show-btn").click(function(){
$(".sm-menu").fadeToggle("fast");
});
</script>
</body>
</html>
body{
margin: 0;
padding: 0;
background: #9c88ff;
}
.middle{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.sm-container{
text-align: center;
}
.sm-container i{
color: #f5f6fa;
padding: 20px;
font-size: 20px;
cursor: pointer;
transition: 0.4s;
}
.sm-container i:hover{
transform: scale(1.2);
}
.sm-menu{
background: #487eb0;
position: absolute;
border-radius: 8px;
display: none;
}
.sm-menu::before{
content: "";
width: 10px;
height: 10px;
background: #487eb0;
position: absolute;
top: -5px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<div class="middle">
<div class="sm-container">
<i class="show-btn fas fa-user"></i>
<div class="sm-menu">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
<a href="#"><i class="fab fa-whatsapp"></i></a>
</div>
</div>
</div>
<script>
$(".show-btn").click(function(){
$(".sm-menu").fadeToggle("fast");
});
</script>
</body>
</html>
body{
margin: 0;
padding: 0;
background: #9c88ff;
}
.middle{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.sm-container{
text-align: center;
}
.sm-container i{
color: #f5f6fa;
padding: 20px;
font-size: 20px;
cursor: pointer;
transition: 0.4s;
}
.sm-container i:hover{
transform: scale(1.2);
}
.sm-menu{
background: #487eb0;
position: absolute;
border-radius: 8px;
display: none;
}
.sm-menu::before{
content: "";
width: 10px;
height: 10px;
background: #487eb0;
position: absolute;
top: -5px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
}
Media is too big
VIEW IN TELEGRAM
Великолепный Экран Поиска с Использованием HTML, CSS и JQuery
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
</head>
<body>
<header>
<h1>Search Box</h1>
<div class="search-screen">
<i class="fas fa-search search-icon"></i>
<div class="search-box">
<input type="text" class="search-txt" placeholder="search">
<button class="search-btn"><i class="fas fa-arrow-right"></i></button>
</div>
</div>
</header>
<script type="text/javascript">
$(".search-icon").click(function(){
$(this).toggleClass("fa-times");
$(".search-screen").toggleClass("active");
});
$(".search-txt").keyup(function(){
if($(this).val() != ""){
$(".search-btn").css("opacity",1);
$(".search-btn").css("transform","rotate(0deg)");
}else{
$(".search-btn").css("opacity",0);
$(".search-btn").css("transform","rotate(45deg)");
}
});
</script>
</body>
</html>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "montserrat",sans-serif;
}
header{
height: 60px;
background: #333;
padding: 0 20px;
color: #fff;
}
header h1{
line-height: 60px;
}
.search-screen,.search-icon{
position: absolute;
top: 0;
right: 0;
width: 60px;
height: 60px;
transition: .4s linear;
}
.search-icon{
text-align: center;
line-height: 60px !important;
cursor: pointer;
font-size: 18px;
}
.search-icon:hover{
transform: scale(1.1);
}
.search-box{
width: 0;
height: 0;
position: absolute;
overflow: hidden;
opacity: 0;
transition: opacity .3s linear;
transition-delay: .5s;
}
.search-screen.active{
position: fixed;
background: #03a9f4;
width: 100%;
height: 100vh;
}
.search-screen.active .search-box{
opacity: 1;
width: 360px;
height: 50px;
border: 2px solid #fff;
border-radius: 30px;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.search-txt{
border: 0;
width: 100%;
height: 100%;
background: none;
padding: 0 30px;
color: #fff;
outline: none;
padding-right: 50px;
}
.search-txt::placeholder{
color: #fff;
}
.search-btn{
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 100%;
background: none;
border: 0;
outline: none;
color: #fff;
cursor: pointer;
font-size: 18px;
transform: rotate(45deg);
opacity: 0;
transition: .3s linear;
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
</head>
<body>
<header>
<h1>Search Box</h1>
<div class="search-screen">
<i class="fas fa-search search-icon"></i>
<div class="search-box">
<input type="text" class="search-txt" placeholder="search">
<button class="search-btn"><i class="fas fa-arrow-right"></i></button>
</div>
</div>
</header>
<script type="text/javascript">
$(".search-icon").click(function(){
$(this).toggleClass("fa-times");
$(".search-screen").toggleClass("active");
});
$(".search-txt").keyup(function(){
if($(this).val() != ""){
$(".search-btn").css("opacity",1);
$(".search-btn").css("transform","rotate(0deg)");
}else{
$(".search-btn").css("opacity",0);
$(".search-btn").css("transform","rotate(45deg)");
}
});
</script>
</body>
</html>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "montserrat",sans-serif;
}
header{
height: 60px;
background: #333;
padding: 0 20px;
color: #fff;
}
header h1{
line-height: 60px;
}
.search-screen,.search-icon{
position: absolute;
top: 0;
right: 0;
width: 60px;
height: 60px;
transition: .4s linear;
}
.search-icon{
text-align: center;
line-height: 60px !important;
cursor: pointer;
font-size: 18px;
}
.search-icon:hover{
transform: scale(1.1);
}
.search-box{
width: 0;
height: 0;
position: absolute;
overflow: hidden;
opacity: 0;
transition: opacity .3s linear;
transition-delay: .5s;
}
.search-screen.active{
position: fixed;
background: #03a9f4;
width: 100%;
height: 100vh;
}
.search-screen.active .search-box{
opacity: 1;
width: 360px;
height: 50px;
border: 2px solid #fff;
border-radius: 30px;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.search-txt{
border: 0;
width: 100%;
height: 100%;
background: none;
padding: 0 30px;
color: #fff;
outline: none;
padding-right: 50px;
}
.search-txt::placeholder{
color: #fff;
}
.search-btn{
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 100%;
background: none;
border: 0;
outline: none;
color: #fff;
cursor: pointer;
font-size: 18px;
transform: rotate(45deg);
opacity: 0;
transition: .3s linear;
}
This media is not supported in your browser
VIEW IN TELEGRAM
Анимированная Кнопка «Поделиться» с Использованием HTML и CSS