<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
background:#2C2C2C;
}
.container{
width:290px;
height:190px;
background:linear-gradient(60deg,
#000,#434343);
border-radius:10px;
box-shadow: rgba(0, 0, 0,.7)
0px 4px 12px;
}
.container .card{
width:100%;
height:100%;
margin:0 auto;
position:relative;
z-index:1;
border-radius:10px;
transition:1s;
box-shadow:rgba(0, 0, 0,.7)
0px 4px 12px;
}
.card img{
width:100%;
height:100%;
border-radius:10px;
}
.container .content{
width:100%;
height:100%;
border-radius:10px;
transform:translateY(-168px);
transition:1s;
}
.content h3,p{
text-align:center;
color:transparent;
background:linear-gradient(#41311b,
#f8c842);
-webkit-background-clip: text;
text-shadow:0px 6px 10px
rgba(0,0,0,.5);
}
.content h3{
font-size:25px;
text-transform:uppercase;
}
.content p{
margin-top:-15px;
font-family:monospace;
}
.container:hover .card{
width:60%;
height:70%;
opacity:1;
transform:translateY(-40px);
}
.container:hover .content{
transform:translateY(-40px);
}










</style>
</head>
<body>



<div class="container">
<div class="card">
<img src="https://wallpapers.com/images/hd/iron-man-tony-stark-ouqxo5w2b59h0042.webp">
</div>

<div class="content" >
<h3>iron man</h3>
<p>Hey Friends i am iron
man.</p>
</div>
</div>



</body>
</html>

SOURCE CODE
👇👇👇

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
background:#262626;

}
.items{
width:25px;
height:100px;
background:red;
position:relative;
border-radius:30px 0px 30px 0px;
animation:rotate 4s linear
infinite;
}


.item1{
top:100px;
background:blue;
animation-delay:0.5s;
}
.item2{
background:green;
animation-delay:1s;
}
.item3{
top:-100px;
background:red;
animation-delay:1.5s;

}
@keyframes rotate{
0%{
transform:rotate(0deg);
}
50%{
transform:rotate(360deg);
}
100%{
transform:rotate(0deg);
}
}
</style>
</head>
<body>
<div class="conatainer">

<div class="items item1"></div>
<div class="items item2"></div>
<div class="items item3"></div>

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

SOURCE CODE
👇👇👇

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
div{
position:absolute;
}
button{
padding:10px 50px;
border:none;
font-size:20px;
font-weight:800;
letter-spacing:1px;
background:#262626;
color:#fff;
text-transform:uppercase;
}
button::before{
content:" ";
width:30px;
height:30px;
position:absolute;
top:-5px;
left:-5px;
border-top:3px solid #000;
border-left:3px solid #000;
transition:0.6s;
}
button::after{
content:" ";
width:30px;
height:30px;
position:absolute;
bottom:-5px;
right:-5px;
border-bottom:3px solid #000;
border-right:3px solid #000;
transition:0.6s;
}
button:hover:before,
button:hover:after{
width:100%;
height:100%;
}
</style>
</head>
<body>
<div>

<button>Button</button>

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

Button animation

SOURCE CODE
     👇👇👇

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
background:#262626;
}
.container{
width:150px;
height:50px;
perspective:600px;
}
.flip{
width:100%;
height:100%;
position:relative;
transform-style:preserve-3d;
transition:transform 0.5s;
}
.container:hover .flip{
transform:rotateX(180deg);
}
.front,.back{
width:100%;
height:100%;
position:absolute;
background:#55c2da;
backface-visibility:hidden;
border-radius:30px;

}
.back{
transform:rotateX(180deg);
}
p{
font-weight:bold;
font-family:sans-serif;
text-align:center;
color:black;
}
</style>
</head>
<body>
<div class="container">
<div class="flip">
<div class="front">
<p>Click me</p>
</div>

<div class="back">
<p>Thank you !</p>
</div>
</div>
</div>

</body>
</html>

SOURCE CODE
👇👇👇

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">


body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
.items{
width:70px;
height:10px;
border-radius:50px;
background:red;
transform-origin:0px 100px;
animation:a 2s linear alternate
infinite;

}
.item1{
background:red;
animation-delay:0s;
}
.item2{
background:black;
animation-delay:0.5s;
}
.item3{

background:yellow;
animation-delay:1s;
}
@keyframes a{
0%{
background:yellow;
height:1px;
}
50%{
background:#262626;
height:30px;
}

100%{
background:red;
height:100px;
}
}
</style>
</head>
<body>
<div class="container">

<div class="items item1"></div>
<div class="items item2" ></div>
<div class="items item3" ></div>

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

SOURCE CODE
👇👇👇

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">

body{
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
background:#262626;
}
.container{
width:300px;
height:395px;
position:relative;
overflow:hidden;
border:2px groove #fff;
}
.imagebox{
width:100%;
height:100%;
transition:.5s;
}
.imagebox img{
width:100%;
height:100%;
}
.box{
width:0px;
height:0px;
position:absolute;
background:rgba(255,255,255,0.2);
transition:1s ease;
}
.left-top{
top:0;
left:0;
}
.right-top{
top:0;
right:0;
}
.left-bottom{
bottom:0;
left:0;
}
.right-bottom{
bottom:0;
right:0;
}
.container:hover .box{
width:100%;
height:100%;
}
.container:hover .imagebox
{
transform:rotate(30deg) scale(1.8);
}

.content{
position:absolute;
top:0;
width:100%;
height:100%;
opacity:0;
transition-delay:0.4s;
transition-duration:0.6s;
}
.content h2{
text-align:center;
color:orange;
text-shadow:0px 1px 3px #000;
text-transform:uppercase;
}
.content p{
padding:30px;
text-align:justify;
font-family:fantasy;
font-weight:bolder;
line-height:23px;
font-size:13px;
}
.content a{
color:#fff;
background:orange;
padding:15px 15px;
margin-left:70px;
text-decoration:none;
font-weight:bolder;
font-size:12px;
box-shadow:0px 3px 10px
rgba(0,0,0,0.5);
}
.container:hover .content{
opacity:1;
}
</style>
</head>
<body>
<div class="container">

<div class="imagebox">
<img src="bhediya-poster.jpg">
</div>

<div class="box left-top"></div>
<div class="box right-top"></div>
<div class="box left-bottom"></div>
<div class="box right-bottom"></div>

<div class="content">
<h2>Bhediya Movie</h2>
<p>
Bhediya is an upcoming Indian
Hindi-language comedy horror
film directed by Amar Kaushik.
Produced by Dinesh Vijan, it
stars Varun Dhawan and Kriti
Sanon. It is the third installment
in Vijan's horror-comedy universe,
scheduled to release on 25 November 2022.
</p>

<a href="#">
Play Trailer on YouTube
</a>
</div>
</div>
</body>
</html>

Source code
👇👇👇

Source code
   👇👇👇

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
background:#262626;
}
.container span{
color:rgba(255,255,255,0.1);
font-size:25px;
font-family:Arial,sans-serif;
text-transform:uppercase;
display:inline-block;
transition:all 0.5s;
animation:a 2s infinite;
}
span:nth-child(1){
animation-delay:0s;
}
span:nth-child(2){
animation-delay:0.2s;
}
span:nth-child(3){
animation-delay:0.4s;
}
span:nth-child(4){
animation-delay:0.6s;
}
span:nth-child(5){
animation-delay:0.8s;
}
span:nth-child(6){
animation-delay:1s;
}
span:nth-child(7){
animation-delay:1.2s;
}
span:nth-child(8){
animation-delay:1.4s;
}
span:nth-child(9){
animation-delay:1.6s;
}
span:nth-child(10){
animation-delay:1.8s;
}
@keyframes a{
0%{
transform:translateY(0);
margin-left:0px;
}
25%{
color:red;
transform:translateY(-15px)
scale(5);
margin-left:10px;
text-shadow:0px 15px 5px
rgba(0,0,0,1);
}
100%{
color:green;
transform:translateY(0);
margin-left:0px;
}
}
</style>
</head>
<body>
<div class="container">
<span>w</span>
<span>e</span>
<span>b</span>
<span>.</span>
<span>h</span>
<span>t</span>
<span>m</span>
<span>l</span>
<span>c</span>
<span>c</span>
</div>
</body>
</html>