Css :-

.btn {
position: relative;
display: flex;
overflow: hidden;
cursor: pointer;
width: 150px;
height: 50px;
background-color: #eeeeed;
border-radius: 80px;
border: none;
padding: 0 80px;
transition: all .2s ease;
justify-content: center;
align-items: center;
}

.btn:hover {
transform: scale(1.1);
}

.btn span {
position: absolute;
z-index: 99;
width: 150px;
height: 50px;
border-radius: 80px;
font-family: 'Courier New', Courier, monospace;
font-weight: 600;
font-size: 17px;
text-align: center;
line-height: 50px;
letter-spacing: 2px;
color: #eeeeed;
background-color: #1f1f1f;
padding: 0 10px;
transition: all 1.2s ease;
}

.btn .container {
display: flex;
width: 150px;
border-radius: 80px;
line-height: 50px;
}

.btn svg {
padding: 0 5px;
opacity: 0;
}

.btn .container svg:nth-of-type(1) {
transition-delay: 0.65s;
}

.btn .container svg:nth-of-type(2) {
transition-delay: 0.8s;
}

.container svg:nth-of-type(3) {
transition-delay: 0.5s;
}

.btn:hover span {
opacity: 0;
}

.btn:hover svg {
opacity: 1;
}

Html :-

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

Css :-

.loader {
display: flex;
justify-content: center;
align-items: center;
--color: hsl(0, 0%, 87%);
--animation: 2s ease-in-out infinite;
}

.loader .circle {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 20px;
height: 20px;
border: solid 2px var(--color);
border-radius: 50%;
margin: 0 10px;
background-color: transparent;
animation: circle-keys var(--animation);
}

.loader .circle .dot {
position: absolute;
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
border-radius: 50%;
background-color: var(--color);
animation: dot-keys var(--animation);
}

.loader .circle .outline {
position: absolute;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
border-radius: 50%;
animation: outline-keys var(--animation);
}

.circle:nth-child(2) {
animation-delay: 0.3s;
}

.circle:nth-child(3) {
animation-delay: 0.6s;
}

.circle:nth-child(4) {
animation-delay: 0.9s;
}

.circle:nth-child(5) {
animation-delay: 1.2s;
}

.circle:nth-child(2) .dot {
animation-delay: 0.3s;
}

.circle:nth-child(3) .dot {
animation-delay: 0.6s;
}

.circle:nth-child(4) .dot {
animation-delay: 0.9s;
}

.circle:nth-child(5) .dot {
animation-delay: 1.2s;
}

.circle:nth-child(1) .outline {
animation-delay: 0.9s;
}

.circle:nth-child(2) .outline {
animation-delay: 1.2s;
}

.circle:nth-child(3) .outline {
animation-delay: 1.5s;
}

.circle:nth-child(4) .outline {
animation-delay: 1.8s;
}

.circle:nth-child(5) .outline {
animation-delay: 2.1s;
}

@keyframes circle-keys {
0% {
transform: scale(1);
opacity: 1;
}

50% {
transform: scale(1.5);
opacity: 0.5;
}

100% {
transform: scale(1);
opacity: 1;
}
}

@keyframes dot-keys {
0% {
transform: scale(1);
}

50% {
transform: scale(0);
}

100% {
transform: scale(1);
}
}

@keyframes outline-keys {
0% {
transform: scale(0);
outline: solid 20px var(--color);
outline-offset: 0;
opacity: 1;
}

100% {
transform: scale(1);
outline: solid 0 transparent;
outline-offset: 20px;
opacity: 0;
}
}

Html :-

<div class="loader">
<svg height="0" width="0" viewBox="0 0 64 64" class="absolute">
<defs class="s-xJBuHA073rTt" xmlns="http://www.w3.org/2000/svg">
<linearGradient class="s-xJBuHA073rTt" gradientUnits="userSpaceOnUse" y2="2" x2="0" y1="62" x1="0" id="b">
<stop class="s-xJBuHA073rTt" stop-color="#973BED"></stop>
<stop class="s-xJBuHA073rTt" stop-color="#007CFF" offset="1"></stop>
</linearGradient>
<linearGradient class="s-xJBuHA073rTt" gradientUnits="userSpaceOnUse" y2="0" x2="0" y1="64" x1="0" id="c">
<stop class="s-xJBuHA073rTt" stop-color="#FFC800"></stop>
<stop class="s-xJBuHA073rTt" stop-color="#F0F" offset="1"></stop>
<animateTransform repeatCount="indefinite" keySplines=".42,0,.58,1;.42,0,.58,1;.42,0,.58,1;.42,0,.58,1;.42,0,.58,1;.42,0,.58,1;.42,0,.58,1;.42,0,.58,1" keyTimes="0; 0.125; 0.25; 0.375; 0.5; 0.625; 0.75; 0.875; 1" dur="8s" values="0 32 32;-270 32 32;-270 32 32;-540 32 32;-540 32 32;-810 32 32;-810 32 32;-1080 32 32;-1080 32 32" type="rotate" attributeName="gradientTransform"></animateTransform>
</linearGradient>
<linearGradient class="s-xJBuHA073rTt" gradientUnits="userSpaceOnUse" y2="2" x2="0" y1="62" x1="0" id="d">
<stop class="s-xJBuHA073rTt" stop-color="#00E0ED"></stop>
<stop class="s-xJBuHA073rTt" stop-color="#00DA72" offset="1"></stop>
</linearGradient>
</defs>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" class="inline-block">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#b)" d="M 54.722656,3.9726563 A 2.0002,2.0002 0 0 0 54.941406,4 h 5.007813 C 58.955121,17.046124 49.099667,27.677057 36.121094,29.580078 a 2.0002,2.0002 0 0 0 -1.708985,1.978516 V 60 H 29.587891 V 31.558594 A 2.0002,2.0002 0 0 0 27.878906,29.580078 C 14.900333,27.677057 5.0448787,17.046124 4.0507812,4 H 9.28125 c 1.231666,11.63657 10.984383,20.554048 22.6875,20.734375 a 2.0002,2.0002 0 0 0 0.02344,0 c 11.806958,0.04283 21.70649,-9.003371 22.730469,-20.7617187 z" class="dash" id="y" pathLength="360"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="--rotation-duration:0ms; --rotation-direction:normal;" viewBox="0 0 64 64" height="64" width="64" class="inline-block">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="10" stroke="url(#c)" d="M 32 32
m 0 -27
a 27 27 0 1 1 0 54
a 27 27 0 1 1 0 -54" class="spin" id="o" pathLength="360"></path>
</svg>
<div class="w-2"></div>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="--rotation-duration:0ms; --rotation-direction:normal;" viewBox="0 0 64 64" height="64" width="64" class="inline-block">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#d)" d="M 4,4 h 4.6230469 v 25.919922 c -0.00276,11.916203 9.8364941,21.550422 21.7500001,21.296875 11.616666,-0.240651 21.014356,-9.63894 21.253906,-21.25586 a 2.0002,2.0002 0 0 0 0,-0.04102 V 4 H 56.25 v 25.919922 c 0,14.33873 -11.581192,25.919922 -25.919922,25.919922 a 2.0002,2.0002 0 0 0 -0.0293,0 C 15.812309,56.052941 3.998433,44.409961 4,29.919922 Z" class="dash" id="u" pathLength="360"></path>
</svg>
</div>

Css :-

.absolute {
position: absolute;
}

.inline-block {
display: inline-block;
}

.loader {
display: flex;
margin: 0.25em 0;
}

.w-2 {
width: 0.5em;
}

.dash {
animation: dashArray 2s ease-in-out infinite,
dashOffset 2s linear infinite;
}

.spin {
animation: spinDashArray 2s ease-in-out infinite,
spin 8s ease-in-out infinite,
dashOffset 2s linear infinite;
transform-origin: center;
}

@keyframes dashArray {
0% {
stroke-dasharray: 0 1 359 0;
}

50% {
stroke-dasharray: 0 359 1 0;
}

100% {
stroke-dasharray: 359 1 0 0;
}
}

@keyframes spinDashArray {
0% {
stroke-dasharray: 270 90;
}

50% {
stroke-dasharray: 0 360;
}

100% {
stroke-dasharray: 270 90;
}
}

@keyframes dashOffset {
0% {
stroke-dashoffset: 365;
}

100% {
stroke-dashoffset: 5;
}
}

@keyframes spin {
0% {
rotate: 0deg;
}

12.5%,
25% {
rotate: 270deg;
}

37.5%,
50% {
rotate: 540deg;
}

62.5%,
75% {
rotate: 810deg;
}

87.5%,
100% {
rotate: 1080deg;
}
}

Html :-

<button data-text="Awesome" class="button">
<span class="actual-text"> Dev_html </span>
<span class="hover-text" aria-hidden="true"> Dev_html </span>
</button>

Css :-

/* === removing default button style ===*/
.button {
margin: 0;
height: auto;
background: transparent;
padding: 0;
border: none;
}

/* button styling */
.button {
--border-right: 6px;
--text-stroke-color: rgba(255,255,255,0.6);
--animation-color: #37FF8B;
--fs-size: 2em;
letter-spacing: 3px;
text-decoration: none;
font-size: var(--fs-size);
font-family: "Arial";
position: relative;
text-transform: uppercase;
color: transparent;
-webkit-text-stroke: 1px var(--text-stroke-color);
}
/* this is the text, when you hover on button */
.hover-text {
position: absolute;
box-sizing: border-box;
content: attr(data-text);
color: var(--animation-color);
width: 0%;
inset: 0;
border-right: var(--border-right) solid var(--animation-color);
overflow: hidden;
transition: 0.5s;
-webkit-text-stroke: 1px var(--animation-color);
}
/* hover */
.button:hover .hover-text {
width: 100%;
filter: drop-shadow(0 0 23px var(--animation-color))
}

Html :-


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

Css:-

.loader {
position: relative;
width: 2.5em;
height: 2.5em;
transform: rotate(165deg);
}

.loader:before, .loader:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 0.5em;
height: 0.5em;
border-radius: 0.25em;
transform: translate(-50%, -50%);
}

.loader:before {
animation: before8 2s infinite;
}

.loader:after {
animation: after6 2s infinite;
}

@keyframes before8 {
0% {
width: 0.5em;
box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
}

35% {
width: 2.5em;
box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75);
}

70% {
width: 0.5em;
box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75);
}

100% {
box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
}
}

@keyframes after6 {
0% {
height: 0.5em;
box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
}

35% {
height: 2.5em;
box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75);
}

70% {
height: 0.5em;
box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75);
}

100% {
box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
}
}

.loader {
position: absolute;
top: calc(50% - 1.25em);
left: calc(50% - 1.25em);
}

Html :-

<label class="ui-switch">
<input type="checkbox">
<div class="slider">
<div class="circle"></div>
</div>
</label>

Css:-

/* switch settings 👇 */

.ui-switch {
/* switch */
--switch-bg: rgb(135, 150, 165);
--switch-width: 48px;
--switch-height: 20px;
/* circle */
--circle-diameter: 32px;
--circle-bg: rgb(0, 56, 146);
--circle-inset: calc((var(--circle-diameter) - var(--switch-height)) / 2);
}

.ui-switch input {
display: none;
}

.slider {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: var(--switch-width);
height: var(--switch-height);
background: var(--switch-bg);
border-radius: 999px;
position: relative;
cursor: pointer;
}

.slider .circle {
top: calc(var(--circle-inset) * -1);
left: 0;
width: var(--circle-diameter);
height: var(--circle-diameter);
position: absolute;
background: var(--circle-bg);
border-radius: inherit;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHdpZHRoPSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxwYXRoIGZpbGw9IiNmZmYiCiAgICAgICAgZD0iTTkuMzA1IDEuNjY3VjMuNzVoMS4zODlWMS42NjdoLTEuMzl6bS00LjcwNyAxLjk1bC0uOTgyLjk4Mkw1LjA5IDYuMDcybC45ODItLjk4Mi0xLjQ3My0xLjQ3M3ptMTAuODAyIDBMMTMuOTI3IDUuMDlsLjk4Mi45ODIgMS40NzMtMS40NzMtLjk4Mi0uOTgyek0xMCA1LjEzOWE0Ljg3MiA0Ljg3MiAwIDAwLTQuODYyIDQuODZBNC44NzIgNC44NzIgMCAwMDEwIDE0Ljg2MiA0Ljg3MiA0Ljg3MiAwIDAwMTQuODYgMTAgNC44NzIgNC44NzIgMCAwMDEwIDUuMTM5em0wIDEuMzg5QTMuNDYyIDMuNDYyIDAgMDExMy40NzEgMTBhMy40NjIgMy40NjIgMCAwMS0zLjQ3MyAzLjQ3MkEzLjQ2MiAzLjQ2MiAwIDAxNi41MjcgMTAgMy40NjIgMy40NjIgMCAwMTEwIDYuNTI4ek0xLjY2NSA5LjMwNXYxLjM5aDIuMDgzdi0xLjM5SDEuNjY2em0xNC41ODMgMHYxLjM5aDIuMDg0di0xLjM5aC0yLjA4NHpNNS4wOSAxMy45MjhMMy42MTYgMTUuNGwuOTgyLjk4MiAxLjQ3My0xLjQ3My0uOTgyLS45ODJ6bTkuODIgMGwtLjk4Mi45ODIgMS40NzMgMS40NzMuOTgyLS45ODItMS40NzMtMS40NzN6TTkuMzA1IDE2LjI1djIuMDgzaDEuMzg5VjE2LjI1aC0xLjM5eiIgLz4KPC9zdmc+");
background-repeat: no-repeat;
background-position: center center;
-webkit-transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-o-transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12);
;
}

.slider .circle::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.75);
border-radius: inherit;
-webkit-transition: all 500ms;
-o-transition: all 500ms;
transition: all 500ms;
opacity: 0;
}

/* actions */

.ui-switch input:checked+.slider .circle {
left: calc(100% - var(--circle-diameter));
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHdpZHRoPSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxwYXRoIGZpbGw9IiNmZmYiCiAgICAgICAgZD0iTTQuMiAyLjVsLS43IDEuOC0xLjguNyAxLjguNy43IDEuOC42LTEuOEw2LjcgNWwtMS45LS43LS42LTEuOHptMTUgOC4zYTYuNyA2LjcgMCAxMS02LjYtNi42IDUuOCA1LjggMCAwMDYuNiA2LjZ6IiAvPgo8L3N2Zz4=");
}

.ui-switch input:active+.slider .circle::before {
-webkit-transition: 0s;
-o-transition: 0s;
transition: 0s;
opacity: 1;
width: 0;
height: 0;
}

Html :-

<div class="loader">
<div data-glitch="Loading..." class="glitch">Loading...</div>
</div>

Css :-

.glitch {
position: relative;
font-size: 25px;
font-weight: 700;
line-height: 1.2;
color: #fff;
letter-spacing: 5px;
z-index: 1;
animation: shift 1s ease-in-out infinite alternate;
}

.glitch:before,
.glitch:after {
display: block;
content: attr(data-glitch);
position: absolute;
top: 0;
left: 0;
opacity: 0.8;
}

.glitch:before {
animation: glitch 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
color: #8b00ff;
z-index: -1;
}

.glitch:after {
animation: glitch 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
color: #00e571;
z-index: -2;
}

@keyframes glitch {
0% {
transform: translate(0);
}

20% {
transform: translate(-3px, 3px);
}

40% {
transform: translate(-3px, -3px);
}

60% {
transform: translate(3px, 3px);
}

80% {
transform: translate(3px, -3px);
}

to {
transform: translate(0);
}
}

@keyframes shift {
0%, 40%, 44%, 58%, 61%, 65%, 69%, 73%, 100% {
transform: skewX(0deg);
}

41% {
transform: skewX(10deg);
}

42% {
transform: skewX(-10deg);
}

59% {
transform: skewX(40deg) skewY(10deg);
}

60% {
transform: skewX(-40deg) skewY(-10deg);
}

63% {
transform: skewX(10deg) skewY(-5deg);
}

70% {
transform: skewX(-50deg) skewY(-20deg);
}

71% {
transform: skewX(10deg) skewY(-10deg);
}
}