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>

Css :-

.hamburger {
cursor: pointer;
}

.hamburger input {
display: none;
}

.hamburger svg {
/* The size of the SVG defines the overall size */
height: 3em;
/* Define the transition for transforming the SVG */
transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.line {
fill: none;
stroke: white;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 3;
/* Define the transition for transforming the Stroke */
transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.line-top-bottom {
stroke-dasharray: 12 63;
}

.hamburger input:checked + svg {
transform: rotate(-45deg);
}

.hamburger input:checked + svg .line-top-bottom {
stroke-dasharray: 20 300;
stroke-dashoffset: -32.42;
}

Html :-

<div class="light-button">
<button class="bt">
<div class="light-holder">
<div class="dot"></div>
<div class="light"></div>
</div>
<div class="button-holder">
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"></path>
</svg>
<p>Discord</p>
</div>
</button>
</div>

Css :-

.light-button button.bt {
position: relative;
height: 200px;
display: flex;
align-items: flex-end;
outline: none;
background: none;
border: none;
}

.light-button button.bt .button-holder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100px;
width: 100px;
background-color: #0a0a0a;
border-radius: 5px;
color: #0f0f0f;
font-weight: 700;
transition: 300ms;
outline: #0f0f0f 2px solid;
outline-offset: 20;
}

.light-button button.bt .button-holder svg {
height: 50px;
fill: #0f0f0f;
transition: 300ms;
}

.light-button button.bt .light-holder {
position: absolute;
height: 200px;
width: 100px;
display: flex;
flex-direction: column;
align-items: center;
}

.light-button button.bt .light-holder .dot {
position: absolute;
top: 0;
width: 10px;
height: 10px;
background-color: #0a0a0a;
border-radius: 10px;
z-index: 2;
}

.light-button button.bt .light-holder .light {
position: absolute;
top: 0;
width: 200px;
height: 200px;
clip-path: polygon(50% 0%, 25% 100%, 75% 100%);
background: transparent;
}

.light-button button.bt:hover .button-holder svg {
fill: rgba(88, 101, 242, 1);
}

.light-button button.bt:hover .button-holder {
color: rgba(88, 101, 242, 1);
outline: rgba(88, 101, 242, 1) 2px solid;
outline-offset: 2px;
}

.light-button button.bt:hover .light-holder .light {
background: rgb(255, 255, 255);
background: linear-gradient(180deg, rgba(88, 101, 242, 1) 0%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0) 100%);
}

Html :-
<div class="loader">
<div class="square" id="sq1"></div>
<div class="square" id="sq2"></div>
<div class="square" id="sq3"></div>
<div class="square" id="sq4"></div>
<div class="square" id="sq5"></div>
<div class="square" id="sq6"></div>
<div class="square" id="sq7"></div>
<div class="square" id="sq8"></div>
<div class="square" id="sq9"></div>
</div>

Css :-

@keyframes loader_5191 {
from {
opacity: 0;
}

to {
opacity: 1;
}
}

.square {
background: #ddd;
width: 10px;
height: 10px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -5px;
margin-left: -5px;
}

#sq1 {
margin-top: -25px;
margin-left: -25px;
animation: loader_5191 675ms ease-in-out 0s infinite alternate;
}

#sq2 {
margin-top: -25px;
animation: loader_5191 675ms ease-in-out 75ms infinite alternate;
}

#sq3 {
margin-top: -25px;
margin-left: 15px;
animation: loader_5191 675ms ease-in-out 150ms infinite;
}

#sq4 {
margin-left: -25px;
animation: loader_5191 675ms ease-in-out 225ms infinite;
}

#sq5 {
animation: loader_5191 675ms ease-in-out 300ms infinite;
}

#sq6 {
margin-left: 15px;
animation: loader_5191 675ms ease-in-out 375ms infinite;
}

#sq7 {
margin-top: 15px;
margin-left: -25px;
animation: loader_5191 675ms ease-in-out 450ms infinite;
}

#sq8 {
margin-top: 15px;
animation: loader_5191 675ms ease-in-out 525ms infinite;
}

#sq9 {
margin-top: 15px;
margin-left: 15px;
animation: loader_5191 675ms ease-in-out 600ms infinite;
}

Html :-

<div class="container">
<input class="label-check" id="label-check" type="checkbox">
<label for="label-check" class="hamburger-label">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
<label></label></label></div>

Css :-

.label-check {
display: none;
}

.hamburger-label {
width: 70px;
height: 58px;
display: block;
cursor: pointer;
}

.hamburger-label div {
width: 70px;
height: 6px;
background-color: #fff;
position: absolute;
}

.line1 {
transition: all .3s;
}

.line2 {
margin: 18px 0 0 0;
transition: 0.3s;
}

.line3 {
margin: 36px 0 0 0;
transition: 0.3s;
}

#label-check:checked + .hamburger-label .line1 {
transform: rotate(35deg) scaleX(.55) translate(39px, -4.5px);
border-radius: 50px 50px 50px 0;
}

#label-check:checked + .hamburger-label .line3 {
transform: rotate(-35deg) scaleX(.55) translate(39px, 4.5px);
border-radius: 0 50px 50px 50px;
}

#label-check:checked + .hamburger-label .line2 {
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
width: 45px;
}

Html :-

<div class="col-md-6 reject-checkbox">
<div class="mb-2 text-center">
<div class="checkbox-wrapper">
<input
name="ehs_approval"
class="form-check-label custom-radio-label"
id="Rejected"
type="checkbox"
/>
<label for="Rejected">
<div class="tick_mark">
<div class="cross"></div>
</div>
</label>
</div>
</div>
</div>

Css :-

.reject-checkbox .checkbox-wrapper * {
-webkit-tap-highlight-color: transparent;
outline: none;
}
.reject-checkbox .checkbox-wrapper input[type="checkbox"] {
display: none;
}
.reject-checkbox .checkbox-wrapper label {
--size: 50px;
--shadow: calc(var(--size) * 0.07) calc(var(--size) * 0.1);
position: relative;
display: block;
width: var(--size);
height: var(--size);
margin: 0 auto;
background-color: #4158d0;
background-image: linear-gradient(
43deg,
#4158d0 0%,
#c850c0 46%,
#ffcc70 100%
);
border-radius: 50%;
box-shadow: 0 var(--shadow) #ffbeb8;
cursor: pointer;
transition: 0.2s ease transform, 0.2s ease background-color,
0.2s ease box-shadow;
overflow: hidden;
z-index: 1;
}
.reject-checkbox .checkbox-wrapper label:before {
content: "";
position: absolute;
top: 50%;
right: 0;
left: 0;
width: calc(var(--size) * 0.7);
height: calc(var(--size) * 0.7);
margin: 0 auto;
background-color: #fff;
transform: translateY(-50%);
border-radius: 50%;
box-shadow: inset 0 var(--shadow) #ffbeb8;
transition: 0.2s ease width, 0.2s ease height;
}
.reject-checkbox .checkbox-wrapper label:hover:before {
width: calc(var(--size) * 0.55);
height: calc(var(--size) * 0.55);
box-shadow: inset 0 var(--shadow) #ff9d96;
}
.reject-checkbox .checkbox-wrapper label:active {
transform: scale(0.9);
}
.reject-checkbox .checkbox-wrapper .tick_mark {
position: absolute;
top: 9px;
left: 2px;
right: 0;
width: calc(var(--size) * 0.6);
height: calc(var(--size) * 0.6);
margin: 0 auto;
margin-left: calc(var(--size) * 0.14);
transform: rotateZ(-92deg);
}
.reject-checkbox .checkbox-wrapper .tick_mark:before,
.reject-checkbox .checkbox-wrapper .tick_mark:after {
content: "";
position: absolute;
background-color: #fff;
border-radius: 2px;
opacity: 0;
transition: 0.2s ease transform, 0.2s ease opacity;
}
.reject-checkbox .checkbox-wrapper .tick_mark:before {
left: 0;
bottom: 0;
width: calc(var(--size) * 0.1);
height: calc(var(--size) * 0.3);
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.23);
transform: translateY(calc(var(--size) * -0.68));
}
.reject-checkbox .checkbox-wrapper .tick_mark:after {
left: 0;
bottom: 0;
width: 100%;
height: calc(var(--size) * 0.1);
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.23);
transform: translateX(calc(var(--size) * 0.78));
}
.reject-checkbox .checkbox-wrapper input[type="checkbox"]:checked + label {
background-color: #4158d0;
background-image: linear-gradient(
43deg,
#f7805c 0%,
#fb4545 46%,
#e1236a 100%
);
box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px,
rgba(0, 0, 0, 0.22) 0px 15px 12px;
}
.reject-checkbox
.checkbox-wrapper
input[type="checkbox"]:checked
+ label:before {
width: 0;
height: 0;
}

.reject-checkbox
.checkbox-wrapper
input[type="checkbox"]:checked
+ label
.tick_mark:before,
.reject-checkbox
.checkbox-wrapper
input[type="checkbox"]:checked
+ label
.tick_mark:after {
background-color: #fff;
width: calc(var(--size) * 0.4);
height: calc(var(--size) * 0.1);
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
opacity: 1;
}
.reject-checkbox
.checkbox-wrapper
input[type="checkbox"]:checked
+ label
.tick_mark:before {
transform: translate(-50%, -50%) rotate(45deg);
}
.reject-checkbox
.checkbox-wrapper
input[type="checkbox"]:checked
+ label
.tick_mark:after {
transform: translate(-50%, -50%) rotate(-45deg);
}