Html:-

<button class="Btn">
<span class="svgContainer">
<svg fill="white" class="svgIcon" viewBox="0 0 448 512" height="1.5em" xmlns="http://www.w3.org/2000/svg"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg>
</span>
<span class="BG"></span>
</button>

Css :-


.Btn {
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background-color: transparent;
position: relative;
/* overflow: hidden; */
border-radius: 7px;
cursor: pointer;
transition: all .3s;
}

.svgContainer {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: transparent;
backdrop-filter: blur(4px);
letter-spacing: 0.8px;
border-radius: 10px;
transition: all .3s;
border: 1px solid rgba(156, 156, 156, 0.466);
}

.BG {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: #f09433;
background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
z-index: -1;
border-radius: 9px;
pointer-events: none;
transition: all .3s;
}

.Btn:hover .BG {
transform: rotate(35deg);
transform-origin: bottom;
}

.Btn:hover .svgContainer {
background-color: rgba(156, 156, 156, 0.466);
}

Html :-

<ul class="wrapper">
<li class="icon facebook">
<span class="tooltip">Facebook</span>
<span><i class="fab fa-facebook-f"></i></span>
</li>
<li class="icon twitter">
<span class="tooltip">Twitter</span>
<span><i class="fab fa-twitter"></i></span>
</li>
<li class="icon instagram">
<span class="tooltip">Instagram</span>
<span><i class="fab fa-instagram"></i></span>
</li>
</ul>

Css :-
.wrapper {
display: inline-flex;
list-style: none;
height: 120px;
width: 100%;
padding-top: 40px;
font-family: "Poppins", sans-serif;
justify-content: center;
}

.wrapper .icon {
position: relative;
background: #fff;
border-radius: 50%;
margin: 10px;
width: 50px;
height: 50px;
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .tooltip {
position: absolute;
top: 0;
font-size: 14px;
background: #fff;
color: #fff;
padding: 5px 8px;
border-radius: 5px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
opacity: 0;
pointer-events: none;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .tooltip::before {
position: absolute;
content: "";
height: 8px;
width: 8px;
background: #fff;
bottom: -3px;
left: 50%;
transform: translate(-50%) rotate(45deg);
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .icon:hover .tooltip {
top: -45px;
opacity: 1;
visibility: visible;
pointer-events: auto;
}

.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip {
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
}

.wrapper .facebook:hover,
.wrapper .facebook:hover .tooltip,
.wrapper .facebook:hover .tooltip::before {
background: #1877F2;
color: #fff;
}

.wrapper .twitter:hover,
.wrapper .twitter:hover .tooltip,
.wrapper .twitter:hover .tooltip::before {
background: #1DA1F2;
color: #fff;
}

.wrapper .instagram:hover,
.wrapper .instagram:hover .tooltip,
.wrapper .instagram:hover .tooltip::before {
background: #E4405F;
color: #fff;
}

Html :-



<input type="text" name="text" class="input" placeholder="Type your text">

Css :-

.input {
background-color: #383838;
border: 1ex solid none;
border-top-width: 1.7em;
margin: 0;
padding: 0;
color: #383838;
word-wrap: break-word;
outline: 7px solid #383838;
height: 30px;
font-size: 17px;
text-align: center;
transition: all 1s;
max-width: 190px;
font-weight: bold;
font-family: 'Courier New', Courier, monospace;
}

.input:hover {
border-top-width: 0.2em;
background-color: #f1e8e8;
}

.input:focus {
border-top-width: 0.2em;
background-color: #f1e8e8;
}

Html :-

<button class="button">
Button
</button>

Css :-

.button {
position: relative;
width: 120px;
height: 40px;
background-color: #000;
display: flex;
align-items: center;
color: white;
flex-direction: column;
justify-content: center;
border: none;
padding: 12px;
gap: 12px;
border-radius: 8px;
cursor: pointer;
}

.button::before {
content: '';
position: absolute;
inset: 0;
left: -4px;
top: -1px;
margin: auto;
width: 128px;
height: 48px;
border-radius: 10px;
background: linear-gradient(-45deg, #e81cff 0%, #40c9ff 100% );
z-index: -10;
pointer-events: none;
transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.button::after {
content: "";
z-index: -1;
position: absolute;
inset: 0;
background: linear-gradient(-45deg, #fc00ff 0%, #00dbde 100% );
transform: translate3d(0, 0, 0) scale(0.95);
filter: blur(20px);
}

.button:hover::after {
filter: blur(30px);
}

.button:hover::before {
transform: rotate(-180deg);
}

.button:active::before {
scale: 0.7;
}

Html :-

<button>
P L A Y
<div id="clip">
<div id="leftTop" class="corner"></div>
<div id="rightBottom" class="corner"></div>
<div id="rightTop" class="corner"></div>
<div id="leftBottom" class="corner"></div>
</div>
<span id="rightArrow" class="arrow"></span>
<span id="leftArrow" class="arrow"></span>
</button>

Css :-

button {
position: relative;
width: 11em;
height: 4em;
outline: none;
transition: 0.1s;
background-color: transparent;
border: none;
font-size: 13px;
font-weight: bold;
color: #ddebf0;
}

#clip {
--color: #2761c3;
position: absolute;
top: 0;
overflow: hidden;
width: 100%;
height: 100%;
border: 5px double var(--color);
box-shadow: inset 0px 0px 15px #195480;
-webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

.arrow {
position: absolute;
transition: 0.2s;
background-color: #2761c3;
top: 35%;
width: 11%;
height: 30%;
}

#leftArrow {
left: -13.5%;
-webkit-clip-path: polygon(100% 0, 100% 100%, 0 50%);
}

#rightArrow {
-webkit-clip-path: polygon(100% 49%, 0 0, 0 100%);
left: 102%;
}

button:hover #rightArrow {
background-color: #27c39f;
left: -15%;
animation: 0.6s ease-in-out both infinite alternate rightArrow8;
}

button:hover #leftArrow {
background-color: #27c39f;
left: 103%;
animation: 0.6s ease-in-out both infinite alternate leftArrow8;
}

.corner {
position: absolute;
width: 4em;
height: 4em;
background-color: #2761c3;
box-shadow: inset 1px 1px 8px #2781c3;
transform: scale(1) rotate(45deg);
transition: 0.2s;
}

#rightTop {
top: -1.98em;
left: 91%;
}

#leftTop {
top: -1.96em;
left: -3.0em;
}

#leftBottom {
top: 2.10em;
left: -2.15em;
}

#rightBottom {
top: 45%;
left: 88%;
}

button:hover #leftTop {
animation: 0.1s ease-in-out 0.05s both changeColor8,
0.2s linear 0.4s both lightEffect8;
}

button:hover #rightTop {
animation: 0.1s ease-in-out 0.15s both changeColor8,
0.2s linear 0.4s both lightEffect8;
}

button:hover #rightBottom {
animation: 0.1s ease-in-out 0.25s both changeColor8,
0.2s linear 0.4s both lightEffect8;
}

button:hover #leftBottom {
animation: 0.1s ease-in-out 0.35s both changeColor8,
0.2s linear 0.4s both lightEffect8;
}

button:hover .corner {
transform: scale(1.25) rotate(45deg);
}

button:hover #clip {
animation: 0.2s ease-in-out 0.55s both greenLight8;
--color: #27c39f;
}

@keyframes changeColor8 {
from {
background-color: #2781c3;
}

to {
background-color: #27c39f;
}
}

@keyframes lightEffect8 {
from {
box-shadow: 1px 1px 5px #27c39f;
}

to {
box-shadow: 0 0 2px #27c39f;
}
}

@keyframes greenLight8 {
from {
}

to {
box-shadow: inset 0px 0px 32px #27c39f;
}
}

@keyframes leftArrow8 {
from {
transform: translate(0px);
}

to {
transform: translateX(10px);
}
}

@keyframes rightArrow8 {
from {
transform: translate(0px);
}

to {
transform: translateX(-10px);
}
}

Html :-

<div class="spinner">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

Css :-
.spinner {
position: absolute;
width: 9px;
height: 9px;
}

.spinner div {
position: absolute;
width: 50%;
height: 150%;
background: #000000;
transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1%));
animation: spinner-fzua35 1s calc(var(--delay) * 1s) infinite ease;
}

.spinner div:nth-child(1) {
--delay: 0.1;
--rotation: 36;
--translation: 150;
}

.spinner div:nth-child(2) {
--delay: 0.2;
--rotation: 72;
--translation: 150;
}

.spinner div:nth-child(3) {
--delay: 0.3;
--rotation: 108;
--translation: 150;
}

.spinner div:nth-child(4) {
--delay: 0.4;
--rotation: 144;
--translation: 150;
}

.spinner div:nth-child(5) {
--delay: 0.5;
--rotation: 180;
--translation: 150;
}

.spinner div:nth-child(6) {
--delay: 0.6;
--rotation: 216;
--translation: 150;
}

.spinner div:nth-child(7) {
--delay: 0.7;
--rotation: 252;
--translation: 150;
}

.spinner div:nth-child(8) {
--delay: 0.8;
--rotation: 288;
--translation: 150;
}

.spinner div:nth-child(9) {
--delay: 0.9;
--rotation: 324;
--translation: 150;
}

.spinner div:nth-child(10) {
--delay: 1;
--rotation: 360;
--translation: 150;
}

@keyframes spinner-fzua35 {
0%, 10%, 20%, 30%, 50%, 60%, 70%, 80%, 90%, 100% {
transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1%));
}

50% {
transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1.5%));
}
}

Html :-

<div class="loader">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>