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);
}