Html :-

<label class="burger" for="burger">
<input type="checkbox" id="burger">
<span></span>
<span></span>
<span></span>
</label>

Css :-

.burger {
position: relative;
width: 40px;
height: 30px;
background: transparent;
cursor: pointer;
display: block;
}

.burger input {
display: none;
}

.burger span {
display: block;
position: absolute;
height: 4px;
width: 100%;
background: black;
border-radius: 9px;
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: .25s ease-in-out;
}

.burger span:nth-of-type(1) {
top: 0px;
transform-origin: left center;
}

.burger span:nth-of-type(2) {
top: 50%;
transform: translateY(-50%);
transform-origin: left center;
}

.burger span:nth-of-type(3) {
top: 100%;
transform-origin: left center;
transform: translateY(-100%);
}

.burger input:checked ~ span:nth-of-type(1) {
transform: rotate(45deg);
top: 0px;
left: 5px;
}

.burger input:checked ~ span:nth-of-type(2) {
width: 0%;
opacity: 0;
}

.burger input:checked ~ span:nth-of-type(3) {
transform: rotate(-45deg);
top: 28px;
left: 5px;
}

Html :-

<button>
Hover me
</button>

Css :-

button {
width: 10em;
position: relative;
height: 3.5em;
border: 3px ridge #149CEA;
outline: none;
background-color: transparent;
color: white;
transition: 1s;
border-radius: 0.3em;
font-size: 16px;
font-weight: bold;
}

button::after {
content: "";
position: absolute;
top: -10px;
left: 3%;
width: 95%;
height: 40%;
background-color: #212121;
transition: 0.5s;
transform-origin: center;
}

button::before {
content: "";
transform-origin: center;
position: absolute;
top: 80%;
left: 3%;
width: 95%;
height: 40%;
background-color: #212121;
transition: 0.5s;
}

button:hover::before, button:hover::after {
transform: scale(0)
}

button:hover {
box-shadow: inset 0px 0px 25px #1479EA;
}

Html :-

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

Css :-

.spinner {
--size: 30px;
--first-block-clr: #005bba;
--second-block-clr: #fed500;
--clr: #111;
width: 100px;
height: 100px;
position: relative;
}

.spinner::after,.spinner::before {
box-sizing: border-box;
position: absolute;
content: "";
width: var(--size);
height: var(--size);
top: 50%;
animation: up 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
left: 50%;
background: var(--first-block-clr);
}

.spinner::after {
background: var(--second-block-clr);
top: calc(50% - var(--size));
left: calc(50% - var(--size));
animation: down 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
}

@keyframes down {
0%, 100% {
transform: none;
}

25% {
transform: translateX(100%);
}

50% {
transform: translateX(100%) translateY(100%);
}

75% {
transform: translateY(100%);
}
}

@keyframes up {
0%, 100% {
transform: none;
}

25% {
transform: translateX(-100%);
}

50% {
transform: translateX(-100%) translateY(-100%);
}

75% {
transform: translateY(-100%);
}
}

Html :-

<div class="main">
<div class="up">
<button class="card1">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0,0,256,256" width="30px" height="30px" fill-rule="nonzero" class="instagram"><g fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(8,8)"><path d="M11.46875,5c-3.55078,0 -6.46875,2.91406 -6.46875,6.46875v9.0625c0,3.55078 2.91406,6.46875 6.46875,6.46875h9.0625c3.55078,0 6.46875,-2.91406 6.46875,-6.46875v-9.0625c0,-3.55078 -2.91406,-6.46875 -6.46875,-6.46875zM11.46875,7h9.0625c2.47266,0 4.46875,1.99609 4.46875,4.46875v9.0625c0,2.47266 -1.99609,4.46875 -4.46875,4.46875h-9.0625c-2.47266,0 -4.46875,-1.99609 -4.46875,-4.46875v-9.0625c0,-2.47266 1.99609,-4.46875 4.46875,-4.46875zM21.90625,9.1875c-0.50391,0 -0.90625,0.40234 -0.90625,0.90625c0,0.50391 0.40234,0.90625 0.90625,0.90625c0.50391,0 0.90625,-0.40234 0.90625,-0.90625c0,-0.50391 -0.40234,-0.90625 -0.90625,-0.90625zM16,10c-3.30078,0 -6,2.69922 -6,6c0,3.30078 2.69922,6 6,6c3.30078,0 6,-2.69922 6,-6c0,-3.30078 -2.69922,-6 -6,-6zM16,12c2.22266,0 4,1.77734 4,4c0,2.22266 -1.77734,4 -4,4c-2.22266,0 -4,-1.77734 -4,-4c0,-2.22266 1.77734,-4 4,-4z"></path></g></g></svg>
</button>
<button class="card2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="30px" height="30px" class="twitter"><path d="M42,12.429c-1.323,0.586-2.746,0.977-4.247,1.162c1.526-0.906,2.7-2.351,3.251-4.058c-1.428,0.837-3.01,1.452-4.693,1.776C34.967,9.884,33.05,9,30.926,9c-4.08,0-7.387,3.278-7.387,7.32c0,0.572,0.067,1.129,0.193,1.67c-6.138-0.308-11.582-3.226-15.224-7.654c-0.64,1.082-1,2.349-1,3.686c0,2.541,1.301,4.778,3.285,6.096c-1.211-0.037-2.351-0.374-3.349-0.914c0,0.022,0,0.055,0,0.086c0,3.551,2.547,6.508,5.923,7.181c-0.617,0.169-1.269,0.263-1.941,0.263c-0.477,0-0.942-0.054-1.392-0.135c0.94,2.902,3.667,5.023,6.898,5.086c-2.528,1.96-5.712,3.134-9.174,3.134c-0.598,0-1.183-0.034-1.761-0.104C9.268,36.786,13.152,38,17.321,38c13.585,0,21.017-11.156,21.017-20.834c0-0.317-0.01-0.633-0.025-0.945C39.763,15.197,41.013,13.905,42,12.429"></path></svg>
</button>
</div>
<div class="down">
<button class="card3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30px" height="30px" class="github"> <path d="M15,3C8.373,3,3,8.373,3,15c0,5.623,3.872,10.328,9.092,11.63C12.036,26.468,12,26.28,12,26.047v-2.051 c-0.487,0-1.303,0-1.508,0c-0.821,0-1.551-0.353-1.905-1.009c-0.393-0.729-0.461-1.844-1.435-2.526 c-0.289-0.227-0.069-0.486,0.264-0.451c0.615,0.174,1.125,0.596,1.605,1.222c0.478,0.627,0.703,0.769,1.596,0.769 c0.433,0,1.081-0.025,1.691-0.121c0.328-0.833,0.895-1.6,1.588-1.962c-3.996-0.411-5.903-2.399-5.903-5.098 c0-1.162,0.495-2.286,1.336-3.233C9.053,10.647,8.706,8.73,9.435,8c1.798,0,2.885,1.166,3.146,1.481C13.477,9.174,14.461,9,15.495,9 c1.036,0,2.024,0.174,2.922,0.483C18.675,9.17,19.763,8,21.565,8c0.732,0.731,0.381,2.656,0.102,3.594 c0.836,0.945,1.328,2.066,1.328,3.226c0,2.697-1.904,4.684-5.894,5.097C18.199,20.49,19,22.1,19,23.313v2.734 c0,0.104-0.023,0.179-0.035,0.268C23.641,24.676,27,20.236,27,15C27,8.373,21.627,3,15,3z"></path></svg>
</button>
<button class="card4">
<svg height="30px" width="30px" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" class="discord"><path d="M40,12c0,0-4.585-3.588-10-4l-0.488,0.976C34.408,10.174,36.654,11.891,39,14c-4.045-2.065-8.039-4-15-4s-10.955,1.935-15,4c2.346-2.109,5.018-4.015,9.488-5.024L18,8c-5.681,0.537-10,4-10,4s-5.121,7.425-6,22c5.162,5.953,13,6,13,6l1.639-2.185C13.857,36.848,10.715,35.121,8,32c3.238,2.45,8.125,5,16,5s12.762-2.55,16-5c-2.715,3.121-5.857,4.848-8.639,5.815L33,40c0,0,7.838-0.047,13-6C45.121,19.425,40,12,40,12z M17.5,30c-1.933,0-3.5-1.791-3.5-4c0-2.209,1.567-4,3.5-4s3.5,1.791,3.5,4C21,28.209,19.433,30,17.5,30z

M30.5,30c-1.933,0-3.5-1.791-3.5-4c0-2.209,1.567-4,3.5-4s3.5,1.791,3.5,4C34,28.209,32.433,30,30.5,30z"></path></svg>
</button>
</div>
</div>

Css :-

.main {
display: flex;
flex-direction: column;
gap: 0.5em;
}

.up {
display: flex;
flex-direction: row;
gap: 0.5em;
}

.down {
display: flex;
flex-direction: row;
gap: 0.5em;
}

.card1 {
width: 90px;
height: 90px;
outline: none;
border: none;
background: white;
border-radius: 90px 5px 5px 5px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
transition: .2s ease-in-out;
}

.instagram {
margin-top: 1.5em;
margin-left: 1.2em;
fill: #cc39a4;
}

.card2 {
width: 90px;
height: 90px;
outline: none;
border: none;
background: white;
border-radius: 5px 90px 5px 5px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
transition: .2s ease-in-out;
}

.twitter {
margin-top: 1.5em;
margin-left: -.9em;
fill: #03A9F4;
}

.card3 {
width: 90px;
height: 90px;
outline: none;
border: none;
background: white;
border-radius: 5px 5px 5px 90px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
transition: .2s ease-in-out;
}

.github {
margin-top: -.6em;
margin-left: 1.2em;
}

.card4 {
width: 90px;
height: 90px;
outline: none;
border: none;
background: white;
border-radius: 5px 5px 90px 5px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
transition: .2s ease-in-out;
}

.discord {
margin-top: -.9em;
margin-left: -1.2em;
fill: #8c9eff;
}

.card1:hover {
cursor: pointer;
scale: 1.1;
background-color: #cc39a4;
}

.card1:hover .instagram {
fill: white;
}

.card2:hover {
cursor: pointer;
scale: 1.1;
background-color: #03A9F4;
}

.card2:hover .twitter {
fill: white;
}

.card3:hover {
cursor: pointer;
scale: 1.1;
background-color: black;
}

.card3:hover .github {
fill: white;
}

.card4:hover {
cursor: pointer;
scale: 1.1;
background-color: #8c9eff;
}

.card4:hover .discord {
fill: white;
}

Html :-

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

Css :-

.spinner {
width: 3em;
height: 3em;
cursor: not-allowed;
border-radius: 50%;
border: 2px solid #444;
box-shadow: -10px -10px 10px #6359f8, 0px -10px 10px 0px #9c32e2, 10px -10px 10px #f36896, 10px 0 10px #ff0b0b, 10px 10px 10px 0px#ff5500, 0 10px 10px 0px #ff9500, -10px 10px 10px 0px #ffb700;
animation: rot55 0.7s linear infinite;
}

.spinnerin {
border: 2px solid #444;
width: 1.5em;
height: 1.5em;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

@keyframes rot55 {
to {
transform: rotate(360deg);
}
}

Html :-

<button>
<svg height="36px" width="36px" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
<rect fill="#fdd835" y="0" x="0" height="36" width="36"></rect>
<path d="M38.67,42H11.52C11.27,40.62,11,38.57,11,36c0-5,0-11,0-11s1.44-7.39,3.22-9.59 c1.67-2.06,2.76-3.48,6.78-4.41c3-0.7,7.13-0.23,9,1c2.15,1.42,3.37,6.67,3.81,11.29c1.49-0.3,5.21,0.2,5.5,1.28 C40.89,30.29,39.48,38.31,38.67,42z" fill="#e53935"></path>
<path d="M39.02,42H11.99c-0.22-2.67-0.48-7.05-0.49-12.72c0.83,4.18,1.63,9.59,6.98,9.79 c3.48,0.12,8.27,0.55,9.83-2.45c1.57-3,3.72-8.95,3.51-15.62c-0.19-5.84-1.75-8.2-2.13-8.7c0.59,0.66,3.74,4.49,4.01,11.7 c0.03,0.83,0.06,1.72,0.08,2.66c4.21-0.15,5.93,1.5,6.07,2.35C40.68,33.85,39.8,38.9,39.02,42z" fill="#b71c1c"></path>
<path d="M35,27.17c0,3.67-0.28,11.2-0.42,14.83h-2C32.72,38.42,33,30.83,33,27.17 c0-5.54-1.46-12.65-3.55-14.02c-1.65-1.08-5.49-1.48-8.23-0.85c-3.62,0.83-4.57,1.99-6.14,3.92L15,16.32 c-1.31,1.6-2.59,6.92-3,8.96v10.8c0,2.58,0.28,4.61,0.54,5.92H10.5c-0.25-1.41-0.5-3.42-0.5-5.92l0.02-11.09 c0.15-0.77,1.55-7.63,3.43-9.94l0.08-0.09c1.65-2.03,2.96-3.63,7.25-4.61c3.28-0.76,7.67-0.25,9.77,1.13 C33.79,13.6,35,22.23,35,27.17z" fill="#212121"></path>
<path d="M17.165,17.283c5.217-0.055,9.391,0.283,9,6.011c-0.391,5.728-8.478,5.533-9.391,5.337 c-0.913-0.196-7.826-0.043-7.696-5.337C9.209,18,13.645,17.32,17.165,17.283z" fill="#01579b"></path>
<path d="M40.739,37.38c-0.28,1.99-0.69,3.53-1.22,4.62h-2.43c0.25-0.19,1.13-1.11,1.67-4.9 c0.57-4-0.23-11.79-0.93-12.78c-0.4-0.4-2.63-0.8-4.37-0.89l0.1-1.99c1.04,0.05,4.53,0.31,5.71,1.49 C40.689,24.36,41.289,33.53,40.739,37.38z" fill="#212121"></path>
<path d="M10.154,20.201c0.261,2.059-0.196,3.351,2.543,3.546s8.076,1.022,9.402-0.554 c1.326-1.576,1.75-4.365-0.891-5.267C19.336,17.287,12.959,16.251,10.154,20.201z" fill="#81d4fa"></path>
<path d="M17.615,29.677c-0.502,0-0.873-0.03-1.052-0.069c-0.086-0.019-0.236-0.035-0.434-0.06 c-5.344-0.679-8.053-2.784-8.052-6.255c0.001-2.698,1.17-7.238,8.986-7.32l0.181-0.002c3.444-0.038,6.414-0.068,8.272,1.818 c1.173,1.191,1.712,3,1.647,5.53c-0.044,1.688-0.785,3.147-2.144,4.217C22.785,29.296,19.388,29.677,17.615,29.677z M17.086,17.973 c-7.006,0.074-7.008,4.023-7.008,5.321c-0.001,3.109,3.598,3.926,6.305,4.27c0.273,0.035,0.48,0.063,0.601,0.089 c0.563,0.101,4.68,0.035,6.855-1.732c0.865-0.702,1.299-1.57,1.326-2.653c0.051-1.958-0.301-3.291-1.073-4.075 c-1.262-1.281-3.834-1.255-6.825-1.222L17.086,17.973z" fill="#212121"></path>
<path d="M15.078,19.043c1.957-0.326,5.122-0.529,4.435,1.304c-0.489,1.304-7.185,2.185-7.185,0.652 C12.328,19.467,15.078,19.043,15.078,19.043z" fill="#e1f5fe"></path>
</svg>
<span class="now">now!</span>
<span class="play">play</span>
</button>

Css :-

button {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 0 10px;
color: white;
text-shadow: 2px 2px rgb(116, 116, 116);
text-transform: uppercase;
border: solid 2px black;
letter-spacing: 1px;
font-weight: 600;
font-size: 17px;
background-color: hsl(49deg 98% 60%);
border-radius: 50px;
position: relative;
overflow: hidden;
transition: all .5s ease;
}

button:active {
transform: scale(.9);
transition: all 100ms ease;
}

button svg {
transition: all .5s ease;
z-index: 2;
}

.play {
transition: all .5s ease;
transition-delay: 300ms;
}

button:hover svg {
transform: scale(3) translate(50%);
}

.now {
position: absolute;
left: 0;
transform: translateX(-100%);
transition: all .5s ease;
z-index: 2;
}

button:hover .now {
transform: translateX(10px);
transition-delay: 300ms;
}

button:hover .play {
transform: translateX(200%);
transition-delay: 300ms;
}

Html :-

<label class="hamburger">
<input type="checkbox">
<svg viewBox="0 0 32 32">
<path class="line line-top-bottom" d="M27 10 13 10C10.8 10 9 8.2 9 6 9 3.5 10.8 2 13 2 15.2 2 17 3.8 17 6L17 26C17 28.2 18.8 30 21 30 23.2 30 25 28.2 25 26 25 23.8 23.2 22 21 22L7 22"></path>
<path class="line" d="M7 16 27 16"></path>
</svg>
</label>