Dev_html
Photo
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>
<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);
}
}
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);
}
}
Dev_html
Photo
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>
<div class="spinner">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Dev_html
Photo
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%));
}
}
.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%));
}
}
Dev_html
Photo
Html :-
<div class="loader">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="loader">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
Dev_html
Photo
Css :-
.loader {
--dim: 3rem;
width: var(--dim);
height: var(--dim);
position: relative;
animation: spin988 2s linear infinite;
}
.loader .circle {
--color: #333;
--dim: 1.2rem;
width: var(--dim);
height: var(--dim);
background-color: var(--color);
border-radius: 50%;
position: absolute;
}
.loader .circle:nth-child(1) {
top: 0;
left: 0;
}
.loader .circle:nth-child(2) {
top: 0;
right: 0;
}
.loader .circle:nth-child(3) {
bottom: 0;
left: 0;
}
.loader .circle:nth-child(4) {
bottom: 0;
right: 0;
}
@keyframes spin988 {
0% {
transform: scale(1) rotate(0);
}
20%, 25% {
transform: scale(1.3) rotate(90deg);
}
45%, 50% {
transform: scale(1) rotate(180deg);
}
70%, 75% {
transform: scale(1.3) rotate(270deg);
}
95%, 100% {
transform: scale(1) rotate(360deg);
}
}
.loader {
--dim: 3rem;
width: var(--dim);
height: var(--dim);
position: relative;
animation: spin988 2s linear infinite;
}
.loader .circle {
--color: #333;
--dim: 1.2rem;
width: var(--dim);
height: var(--dim);
background-color: var(--color);
border-radius: 50%;
position: absolute;
}
.loader .circle:nth-child(1) {
top: 0;
left: 0;
}
.loader .circle:nth-child(2) {
top: 0;
right: 0;
}
.loader .circle:nth-child(3) {
bottom: 0;
left: 0;
}
.loader .circle:nth-child(4) {
bottom: 0;
right: 0;
}
@keyframes spin988 {
0% {
transform: scale(1) rotate(0);
}
20%, 25% {
transform: scale(1.3) rotate(90deg);
}
45%, 50% {
transform: scale(1) rotate(180deg);
}
70%, 75% {
transform: scale(1.3) rotate(270deg);
}
95%, 100% {
transform: scale(1) rotate(360deg);
}
}
Dev_html
Photo
Html :-
<div class="input">
<button class="value">
<svg data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m1.5 13v1a.5.5 0 0 0 .3379.4731 18.9718 18.9718 0 0 0 6.1621 1.0269 18.9629 18.9629 0 0 0 6.1621-1.0269.5.5 0 0 0 .3379-.4731v-1a6.5083 6.5083 0 0 0 -4.461-6.1676 3.5 3.5 0 1 0 -4.078 0 6.5083 6.5083 0 0 0 -4.461 6.1676zm4-9a2.5 2.5 0 1 1 2.5 2.5 2.5026 2.5026 0 0 1 -2.5-2.5zm2.5 3.5a5.5066 5.5066 0 0 1 5.5 5.5v.6392a18.08 18.08 0 0 1 -11 0v-.6392a5.5066 5.5066 0 0 1 5.5-5.5z" fill="#7D8590"></path></svg>
Public profile
</button>
<button class="value">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" id="Line"><path d="m17.074 30h-2.148c-1.038 0-1.914-.811-1.994-1.846l-.125-1.635c-.687-.208-1.351-.484-1.985-.824l-1.246 1.067c-.788.677-1.98.631-2.715-.104l-1.52-1.52c-.734-.734-.78-1.927-.104-2.715l1.067-1.246c-.34-.635-.616-1.299-.824-1.985l-1.634-.125c-1.035-.079-1.846-.955-1.846-1.993v-2.148c0-1.038.811-1.914 1.846-1.994l1.635-.125c.208-.687.484-1.351.824-1.985l-1.068-1.247c-.676-.788-.631-1.98.104-2.715l1.52-1.52c.734-.734 1.927-.779 2.715-.104l1.246 1.067c.635-.34 1.299-.616 1.985-.824l.125-1.634c.08-1.034.956-1.845 1.994-1.845h2.148c1.038 0 1.914.811 1.994 1.846l.125 1.635c.687.208 1.351.484 1.985.824l1.246-1.067c.787-.676 1.98-.631 2.715.104l1.52 1.52c.734.734.78 1.927.104 2.715l-1.067 1.246c.34.635.616 1.299.824 1.985l1.634.125c1.035.079 1.846.955 1.846 1.993v2.148c0 1.038-.811 1.914-1.846 1.994l-1.635.125c-.208.687-.484 1.351-.824 1.985l1.067 1.246c.677.788.631 1.98-.104 2.715l-1.52 1.52c-.734.734-1.928.78-2.715.104l-1.246-1.067c-.635.34-1.299.616-1.985.824l-.125 1.634c-.079 1.035-.955 1.846-1.993 1.846zm-5.835-6.373c.848.53 1.768.912 2.734 1.135.426.099.739.462.772.898l.18 2.341 2.149-.001.18-2.34c.033-.437.347-.8.772-.898.967-.223 1.887-.604 2.734-1.135.371-.232.849-.197 1.181.089l1.784 1.529 1.52-1.52-1.529-1.784c-.285-.332-.321-.811-.089-1.181.53-.848.912-1.768 1.135-2.734.099-.426.462-.739.898-.772l2.341-.18h-.001v-2.148l-2.34-.18c-.437-.033-.8-.347-.898-.772-.223-.967-.604-1.887-1.135-2.734-.232-.37-.196-.849.089-1.181l1.529-1.784-1.52-1.52-1.784 1.529c-.332.286-.81.321-1.181.089-.848-.53-1.768-.912-2.734-1.135-.426-.099-.739-.462-.772-.898l-.18-2.341-2.148.001-.18 2.34c-.033.437-.347.8-.772.898-.967.223-1.887.604-2.734 1.135-.37.232-.849.197-1.181-.089l-1.785-1.529-1.52 1.52 1.529 1.784c.285.332.321.811.089 1.181-.53.848-.912 1.768-1.135 2.734-.099.426-.462.739-.898.772l-2.341.18.002 2.148 2.34.18c.437.033.8.347.898.772.223.967.604 1.887 1.135 2.734.232.37.196.849-.089 1.181l-1.529 1.784 1.52 1.52 1.784-1.529c.332-.287.813-.32 1.18-.089z" id="XMLID_1646_" fill="#7D8590"></path><path d="m16 23c-3.859 0-7-3.141-7-7s3.141-7 7-7 7 3.141 7 7-3.141 7-7 7zm0-12c-2.757 0-5 2.243-5 5s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z" fill="#7D8590" id="XMLID_1645_"></path></svg>
Account
</button>
<button class="value">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path d="m109.9 20.63a6.232 6.232 0 0 0 -8.588-.22l-57.463 51.843c-.012.011-.02.024-.031.035s-.023.017-.034.027l-4.721 4.722a1.749 1.749 0 0 0 0 2.475l.341.342-3.16 3.16a8 8 0 0 0 -1.424 1.967 11.382 11.382 0 0 0 -12.055 10.609c-.006.036-.011.074-.015.111a5.763 5.763 0 0 1 -4.928 5.41 1.75 1.75 0 0 0 -.844 3.14c4.844 3.619 9.4 4.915 13.338 4.915a17.14 17.14 0 0 0 11.738-4.545l.182-.167a11.354 11.354 0 0 0 3.348-8.081c0-.225-.02-.445-.032-.667a8.041 8.041 0 0 0 1.962-1.421l3.16-3.161.342.342a1.749 1.749 0 0 0 2.475 0l4.722-4.722c.011-.011.018-.025.029-.036s.023-.018.033-.029l51.844-57.46a6.236 6.236 0 0 0 -.219-8.589zm-70.1 81.311-.122.111c-.808.787-7.667 6.974-17.826 1.221a9.166 9.166 0 0 0 4.36-7.036 1.758 1.758 0 0 0 .036-.273 7.892 7.892 0 0 1 9.122-7.414c.017.005.031.014.048.019a1.717 1.717 0 0 0 .379.055 7.918 7.918 0 0 1 4 13.317zm5.239-10.131c-.093.093-.194.176-.293.26a11.459 11.459 0 0 0 -6.289-6.286c.084-.1.167-.2.261-.3l3.161-3.161 6.321 6.326zm7.214-4.057-9.479-9.479 2.247-2.247 9.479 9.479zm55.267-60.879-50.61 56.092-9.348-9.348 56.092-50.61a2.737 2.737 0 0 1
<div class="input">
<button class="value">
<svg data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m1.5 13v1a.5.5 0 0 0 .3379.4731 18.9718 18.9718 0 0 0 6.1621 1.0269 18.9629 18.9629 0 0 0 6.1621-1.0269.5.5 0 0 0 .3379-.4731v-1a6.5083 6.5083 0 0 0 -4.461-6.1676 3.5 3.5 0 1 0 -4.078 0 6.5083 6.5083 0 0 0 -4.461 6.1676zm4-9a2.5 2.5 0 1 1 2.5 2.5 2.5026 2.5026 0 0 1 -2.5-2.5zm2.5 3.5a5.5066 5.5066 0 0 1 5.5 5.5v.6392a18.08 18.08 0 0 1 -11 0v-.6392a5.5066 5.5066 0 0 1 5.5-5.5z" fill="#7D8590"></path></svg>
Public profile
</button>
<button class="value">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" id="Line"><path d="m17.074 30h-2.148c-1.038 0-1.914-.811-1.994-1.846l-.125-1.635c-.687-.208-1.351-.484-1.985-.824l-1.246 1.067c-.788.677-1.98.631-2.715-.104l-1.52-1.52c-.734-.734-.78-1.927-.104-2.715l1.067-1.246c-.34-.635-.616-1.299-.824-1.985l-1.634-.125c-1.035-.079-1.846-.955-1.846-1.993v-2.148c0-1.038.811-1.914 1.846-1.994l1.635-.125c.208-.687.484-1.351.824-1.985l-1.068-1.247c-.676-.788-.631-1.98.104-2.715l1.52-1.52c.734-.734 1.927-.779 2.715-.104l1.246 1.067c.635-.34 1.299-.616 1.985-.824l.125-1.634c.08-1.034.956-1.845 1.994-1.845h2.148c1.038 0 1.914.811 1.994 1.846l.125 1.635c.687.208 1.351.484 1.985.824l1.246-1.067c.787-.676 1.98-.631 2.715.104l1.52 1.52c.734.734.78 1.927.104 2.715l-1.067 1.246c.34.635.616 1.299.824 1.985l1.634.125c1.035.079 1.846.955 1.846 1.993v2.148c0 1.038-.811 1.914-1.846 1.994l-1.635.125c-.208.687-.484 1.351-.824 1.985l1.067 1.246c.677.788.631 1.98-.104 2.715l-1.52 1.52c-.734.734-1.928.78-2.715.104l-1.246-1.067c-.635.34-1.299.616-1.985.824l-.125 1.634c-.079 1.035-.955 1.846-1.993 1.846zm-5.835-6.373c.848.53 1.768.912 2.734 1.135.426.099.739.462.772.898l.18 2.341 2.149-.001.18-2.34c.033-.437.347-.8.772-.898.967-.223 1.887-.604 2.734-1.135.371-.232.849-.197 1.181.089l1.784 1.529 1.52-1.52-1.529-1.784c-.285-.332-.321-.811-.089-1.181.53-.848.912-1.768 1.135-2.734.099-.426.462-.739.898-.772l2.341-.18h-.001v-2.148l-2.34-.18c-.437-.033-.8-.347-.898-.772-.223-.967-.604-1.887-1.135-2.734-.232-.37-.196-.849.089-1.181l1.529-1.784-1.52-1.52-1.784 1.529c-.332.286-.81.321-1.181.089-.848-.53-1.768-.912-2.734-1.135-.426-.099-.739-.462-.772-.898l-.18-2.341-2.148.001-.18 2.34c-.033.437-.347.8-.772.898-.967.223-1.887.604-2.734 1.135-.37.232-.849.197-1.181-.089l-1.785-1.529-1.52 1.52 1.529 1.784c.285.332.321.811.089 1.181-.53.848-.912 1.768-1.135 2.734-.099.426-.462.739-.898.772l-2.341.18.002 2.148 2.34.18c.437.033.8.347.898.772.223.967.604 1.887 1.135 2.734.232.37.196.849-.089 1.181l-1.529 1.784 1.52 1.52 1.784-1.529c.332-.287.813-.32 1.18-.089z" id="XMLID_1646_" fill="#7D8590"></path><path d="m16 23c-3.859 0-7-3.141-7-7s3.141-7 7-7 7 3.141 7 7-3.141 7-7 7zm0-12c-2.757 0-5 2.243-5 5s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z" fill="#7D8590" id="XMLID_1645_"></path></svg>
Account
</button>
<button class="value">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path d="m109.9 20.63a6.232 6.232 0 0 0 -8.588-.22l-57.463 51.843c-.012.011-.02.024-.031.035s-.023.017-.034.027l-4.721 4.722a1.749 1.749 0 0 0 0 2.475l.341.342-3.16 3.16a8 8 0 0 0 -1.424 1.967 11.382 11.382 0 0 0 -12.055 10.609c-.006.036-.011.074-.015.111a5.763 5.763 0 0 1 -4.928 5.41 1.75 1.75 0 0 0 -.844 3.14c4.844 3.619 9.4 4.915 13.338 4.915a17.14 17.14 0 0 0 11.738-4.545l.182-.167a11.354 11.354 0 0 0 3.348-8.081c0-.225-.02-.445-.032-.667a8.041 8.041 0 0 0 1.962-1.421l3.16-3.161.342.342a1.749 1.749 0 0 0 2.475 0l4.722-4.722c.011-.011.018-.025.029-.036s.023-.018.033-.029l51.844-57.46a6.236 6.236 0 0 0 -.219-8.589zm-70.1 81.311-.122.111c-.808.787-7.667 6.974-17.826 1.221a9.166 9.166 0 0 0 4.36-7.036 1.758 1.758 0 0 0 .036-.273 7.892 7.892 0 0 1 9.122-7.414c.017.005.031.014.048.019a1.717 1.717 0 0 0 .379.055 7.918 7.918 0 0 1 4 13.317zm5.239-10.131c-.093.093-.194.176-.293.26a11.459 11.459 0 0 0 -6.289-6.286c.084-.1.167-.2.261-.3l3.161-3.161 6.321 6.326zm7.214-4.057-9.479-9.479 2.247-2.247 9.479 9.479zm55.267-60.879-50.61 56.092-9.348-9.348 56.092-50.61a2.737 2.737 0 0 1
Css :-
.input {
display: flex;
flex-direction: column;
width: 200px;
background-color: #0D1117;
justify-content: center;
border-radius: 5px
}
.value {
background-color: transparent;
border: none;
padding: 10px;
color: white;
display: flex;
position: relative;
gap: 5px;
cursor: pointer;
border-radius: 4px;
}
.value:not(:active):hover,
.value:focus {
background-color: #21262C;
}
.value:focus,
.value:active {
background-color: #1A1F24;
outline: none;
}
.value::before {
content: "";
position: absolute;
top: 5px;
left: -10px;
width: 5px;
height: 80%;
background-color: #2F81F7;
border-radius: 5px;
opacity: 0;
}
.value:focus::before,
.value:active::before {
opacity: 1;
}
.value svg {
width: 15px
}
.input {
display: flex;
flex-direction: column;
width: 200px;
background-color: #0D1117;
justify-content: center;
border-radius: 5px
}
.value {
background-color: transparent;
border: none;
padding: 10px;
color: white;
display: flex;
position: relative;
gap: 5px;
cursor: pointer;
border-radius: 4px;
}
.value:not(:active):hover,
.value:focus {
background-color: #21262C;
}
.value:focus,
.value:active {
background-color: #1A1F24;
outline: none;
}
.value::before {
content: "";
position: absolute;
top: 5px;
left: -10px;
width: 5px;
height: 80%;
background-color: #2F81F7;
border-radius: 5px;
opacity: 0;
}
.value:focus::before,
.value:active::before {
opacity: 1;
}
.value svg {
width: 15px
}
👍1
Dev_html
Photo
Html :-
<div id="wifi-loader">
<svg class="circle-outer" viewBox="0 0 86 86">
<circle class="back" cx="43" cy="43" r="40"></circle>
<circle class="front" cx="43" cy="43" r="40"></circle>
<circle class="new" cx="43" cy="43" r="40"></circle>
</svg>
<svg class="circle-middle" viewBox="0 0 60 60">
<circle class="back" cx="30" cy="30" r="27"></circle>
<circle class="front" cx="30" cy="30" r="27"></circle>
</svg>
<svg class="circle-inner" viewBox="0 0 34 34">
<circle class="back" cx="17" cy="17" r="14"></circle>
<circle class="front" cx="17" cy="17" r="14"></circle>
</svg>
<div class="text" data-text="Searching"></div>
</div>
<div id="wifi-loader">
<svg class="circle-outer" viewBox="0 0 86 86">
<circle class="back" cx="43" cy="43" r="40"></circle>
<circle class="front" cx="43" cy="43" r="40"></circle>
<circle class="new" cx="43" cy="43" r="40"></circle>
</svg>
<svg class="circle-middle" viewBox="0 0 60 60">
<circle class="back" cx="30" cy="30" r="27"></circle>
<circle class="front" cx="30" cy="30" r="27"></circle>
</svg>
<svg class="circle-inner" viewBox="0 0 34 34">
<circle class="back" cx="17" cy="17" r="14"></circle>
<circle class="front" cx="17" cy="17" r="14"></circle>
</svg>
<div class="text" data-text="Searching"></div>
</div>
Dev_html
Photo
Css :-
#wifi-loader {
--background: #62abff;
--front-color: #4f29f0;
--back-color: #c3c8de;
--text-color: #414856;
width: 64px;
height: 64px;
border-radius: 50px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
#wifi-loader svg {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
#wifi-loader svg circle {
position: absolute;
fill: none;
stroke-width: 6px;
stroke-linecap: round;
stroke-linejoin: round;
transform: rotate(-100deg);
transform-origin: center;
}
#wifi-loader svg circle.back {
stroke: var(--back-color);
}
#wifi-loader svg circle.front {
stroke: var(--front-color);
}
#wifi-loader svg.circle-outer {
height: 86px;
width: 86px;
}
#wifi-loader svg.circle-outer circle {
stroke-dasharray: 62.75 188.25;
}
#wifi-loader svg.circle-outer circle.back {
animation: circle-outer135 1.8s ease infinite 0.3s;
}
#wifi-loader svg.circle-outer circle.front {
animation: circle-outer135 1.8s ease infinite 0.15s;
}
#wifi-loader svg.circle-middle {
height: 60px;
width: 60px;
}
#wifi-loader svg.circle-middle circle {
stroke-dasharray: 42.5 127.5;
}
#wifi-loader svg.circle-middle circle.back {
animation: circle-middle6123 1.8s ease infinite 0.25s;
}
#wifi-loader svg.circle-middle circle.front {
animation: circle-middle6123 1.8s ease infinite 0.1s;
}
#wifi-loader svg.circle-inner {
height: 34px;
width: 34px;
}
#wifi-loader svg.circle-inner circle {
stroke-dasharray: 22 66;
}
#wifi-loader svg.circle-inner circle.back {
animation: circle-inner162 1.8s ease infinite 0.2s;
}
#wifi-loader svg.circle-inner circle.front {
animation: circle-inner162 1.8s ease infinite 0.05s;
}
#wifi-loader .text {
position: absolute;
bottom: -40px;
display: flex;
justify-content: center;
align-items: center;
text-transform: lowercase;
font-weight: 500;
font-size: 14px;
letter-spacing: 0.2px;
}
#wifi-loader .text::before, #wifi-loader .text::after {
content: attr(data-text);
}
#wifi-loader .text::before {
color: var(--text-color);
}
#wifi-loader .text::after {
color: var(--front-color);
animation: text-animation76 3.6s ease infinite;
position: absolute;
left: 0;
}
@keyframes circle-outer135 {
0% {
stroke-dashoffset: 25;
}
25% {
stroke-dashoffset: 0;
}
65% {
stroke-dashoffset: 301;
}
80% {
stroke-dashoffset: 276;
}
100% {
stroke-dashoffset: 276;
}
}
@keyframes circle-middle6123 {
0% {
stroke-dashoffset: 17;
}
25% {
stroke-dashoffset: 0;
}
65% {
stroke-dashoffset: 204;
}
80% {
stroke-dashoffset: 187;
}
100% {
stroke-dashoffset: 187;
}
}
@keyframes circle-inner162 {
0% {
stroke-dashoffset: 9;
}
25% {
stroke-dashoffset: 0;
}
65% {
stroke-dashoffset: 106;
}
80% {
stroke-dashoffset: 97;
}
100% {
stroke-dashoffset: 97;
}
}
@keyframes text-animation76 {
0% {
clip-path: inset(0 100% 0 0);
}
50% {
clip-path: inset(0);
}
100% {
clip-path: inset(0 0 0 100%);
}
}
#wifi-loader {
--background: #62abff;
--front-color: #4f29f0;
--back-color: #c3c8de;
--text-color: #414856;
width: 64px;
height: 64px;
border-radius: 50px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
#wifi-loader svg {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
#wifi-loader svg circle {
position: absolute;
fill: none;
stroke-width: 6px;
stroke-linecap: round;
stroke-linejoin: round;
transform: rotate(-100deg);
transform-origin: center;
}
#wifi-loader svg circle.back {
stroke: var(--back-color);
}
#wifi-loader svg circle.front {
stroke: var(--front-color);
}
#wifi-loader svg.circle-outer {
height: 86px;
width: 86px;
}
#wifi-loader svg.circle-outer circle {
stroke-dasharray: 62.75 188.25;
}
#wifi-loader svg.circle-outer circle.back {
animation: circle-outer135 1.8s ease infinite 0.3s;
}
#wifi-loader svg.circle-outer circle.front {
animation: circle-outer135 1.8s ease infinite 0.15s;
}
#wifi-loader svg.circle-middle {
height: 60px;
width: 60px;
}
#wifi-loader svg.circle-middle circle {
stroke-dasharray: 42.5 127.5;
}
#wifi-loader svg.circle-middle circle.back {
animation: circle-middle6123 1.8s ease infinite 0.25s;
}
#wifi-loader svg.circle-middle circle.front {
animation: circle-middle6123 1.8s ease infinite 0.1s;
}
#wifi-loader svg.circle-inner {
height: 34px;
width: 34px;
}
#wifi-loader svg.circle-inner circle {
stroke-dasharray: 22 66;
}
#wifi-loader svg.circle-inner circle.back {
animation: circle-inner162 1.8s ease infinite 0.2s;
}
#wifi-loader svg.circle-inner circle.front {
animation: circle-inner162 1.8s ease infinite 0.05s;
}
#wifi-loader .text {
position: absolute;
bottom: -40px;
display: flex;
justify-content: center;
align-items: center;
text-transform: lowercase;
font-weight: 500;
font-size: 14px;
letter-spacing: 0.2px;
}
#wifi-loader .text::before, #wifi-loader .text::after {
content: attr(data-text);
}
#wifi-loader .text::before {
color: var(--text-color);
}
#wifi-loader .text::after {
color: var(--front-color);
animation: text-animation76 3.6s ease infinite;
position: absolute;
left: 0;
}
@keyframes circle-outer135 {
0% {
stroke-dashoffset: 25;
}
25% {
stroke-dashoffset: 0;
}
65% {
stroke-dashoffset: 301;
}
80% {
stroke-dashoffset: 276;
}
100% {
stroke-dashoffset: 276;
}
}
@keyframes circle-middle6123 {
0% {
stroke-dashoffset: 17;
}
25% {
stroke-dashoffset: 0;
}
65% {
stroke-dashoffset: 204;
}
80% {
stroke-dashoffset: 187;
}
100% {
stroke-dashoffset: 187;
}
}
@keyframes circle-inner162 {
0% {
stroke-dashoffset: 9;
}
25% {
stroke-dashoffset: 0;
}
65% {
stroke-dashoffset: 106;
}
80% {
stroke-dashoffset: 97;
}
100% {
stroke-dashoffset: 97;
}
}
@keyframes text-animation76 {
0% {
clip-path: inset(0 100% 0 0);
}
50% {
clip-path: inset(0);
}
100% {
clip-path: inset(0 0 0 100%);
}
}
Dev_html
Photo
Css :-
.spinner {
width: 56px;
height: 56px;
display: grid;
border: 4.5px solid #0000;
border-radius: 50%;
border-color: #dbdcef #0000;
animation: spinner-e04l1k 1s infinite linear;
}
.spinner::before,
.spinner::after {
content: "";
grid-area: 1/1;
margin: 2.2px;
border: inherit;
border-radius: 50%;
}
.spinner::before {
border-color: #474bff #0000;
animation: inherit;
animation-duration: 0.5s;
animation-direction: reverse;
}
.spinner::after {
margin: 8.9px;
}
@keyframes spinner-e04l1k {
100% {
transform: rotate(1turn);
}
}
.spinner {
width: 56px;
height: 56px;
display: grid;
border: 4.5px solid #0000;
border-radius: 50%;
border-color: #dbdcef #0000;
animation: spinner-e04l1k 1s infinite linear;
}
.spinner::before,
.spinner::after {
content: "";
grid-area: 1/1;
margin: 2.2px;
border: inherit;
border-radius: 50%;
}
.spinner::before {
border-color: #474bff #0000;
animation: inherit;
animation-duration: 0.5s;
animation-direction: reverse;
}
.spinner::after {
margin: 8.9px;
}
@keyframes spinner-e04l1k {
100% {
transform: rotate(1turn);
}
}
Dev_html
Photo
Html :-
<div class="checkbox-wrapper-10">
<input checked="" type="checkbox" id="cb5" class="tgl tgl-flip">
<label for="cb5" data-tg-on="Yeah!" data-tg-off="Nope" class="tgl-btn"></label>
</div>
<div class="checkbox-wrapper-10">
<input checked="" type="checkbox" id="cb5" class="tgl tgl-flip">
<label for="cb5" data-tg-on="Yeah!" data-tg-off="Nope" class="tgl-btn"></label>
</div>
👍1
Dev_html
Photo
Css :-
.checkbox-wrapper-10 .tgl {
display: none;
}
.checkbox-wrapper-10 .tgl,
.checkbox-wrapper-10 .tgl:after,
.checkbox-wrapper-10 .tgl:before,
.checkbox-wrapper-10 .tgl *,
.checkbox-wrapper-10 .tgl *:after,
.checkbox-wrapper-10 .tgl *:before,
.checkbox-wrapper-10 .tgl + .tgl-btn {
box-sizing: border-box;
}
.checkbox-wrapper-10 .tgl::-moz-selection,
.checkbox-wrapper-10 .tgl:after::-moz-selection,
.checkbox-wrapper-10 .tgl:before::-moz-selection,
.checkbox-wrapper-10 .tgl *::-moz-selection,
.checkbox-wrapper-10 .tgl *:after::-moz-selection,
.checkbox-wrapper-10 .tgl *:before::-moz-selection,
.checkbox-wrapper-10 .tgl + .tgl-btn::-moz-selection,
.checkbox-wrapper-10 .tgl::selection,
.checkbox-wrapper-10 .tgl:after::selection,
.checkbox-wrapper-10 .tgl:before::selection,
.checkbox-wrapper-10 .tgl *::selection,
.checkbox-wrapper-10 .tgl *:after::selection,
.checkbox-wrapper-10 .tgl *:before::selection,
.checkbox-wrapper-10 .tgl + .tgl-btn::selection {
background: none;
}
.checkbox-wrapper-10 .tgl + .tgl-btn {
outline: 0;
display: block;
width: 4em;
height: 2em;
position: relative;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.checkbox-wrapper-10 .tgl + .tgl-btn:after,
.checkbox-wrapper-10 .tgl + .tgl-btn:before {
position: relative;
display: block;
content: "";
width: 50%;
height: 100%;
}
.checkbox-wrapper-10 .tgl + .tgl-btn:after {
left: 0;
}
.checkbox-wrapper-10 .tgl + .tgl-btn:before {
display: none;
}
.checkbox-wrapper-10 .tgl:checked + .tgl-btn:after {
left: 50%;
}
.checkbox-wrapper-10 .tgl-flip + .tgl-btn {
padding: 2px;
transition: all 0.2s ease;
font-family: sans-serif;
perspective: 100px;
}
.checkbox-wrapper-10 .tgl-flip + .tgl-btn:after,
.checkbox-wrapper-10 .tgl-flip + .tgl-btn:before {
display: inline-block;
transition: all 0.4s ease;
width: 100%;
text-align: center;
position: absolute;
line-height: 2em;
font-weight: bold;
color: #fff;
position: absolute;
top: 0;
left: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 4px;
}
.checkbox-wrapper-10 .tgl-flip + .tgl-btn:after {
content: attr(data-tg-on);
background: #02C66F;
transform: rotateY(-180deg);
}
.checkbox-wrapper-10 .tgl-flip + .tgl-btn:before {
background: #FF3A19;
content: attr(data-tg-off);
}
.checkbox-wrapper-10 .tgl-flip + .tgl-btn:active:before {
transform: rotateY(-20deg);
}
.checkbox-wrapper-10 .tgl-flip:checked + .tgl-btn:before {
transform: rotateY(180deg);
}
.checkbox-wrapper-10 .tgl-flip:checked + .tgl-btn:after {
transform: rotateY(0);
left: 0;
background: #7FC6A6;
}
.checkbox-wrapper-10 .tgl-flip:checked + .tgl-btn:active:after {
transform: rotateY(20deg);
}
.checkbox-wrapper-10 .tgl {
display: none;
}
.checkbox-wrapper-10 .tgl,
.checkbox-wrapper-10 .tgl:after,
.checkbox-wrapper-10 .tgl:before,
.checkbox-wrapper-10 .tgl *,
.checkbox-wrapper-10 .tgl *:after,
.checkbox-wrapper-10 .tgl *:before,
.checkbox-wrapper-10 .tgl + .tgl-btn {
box-sizing: border-box;
}
.checkbox-wrapper-10 .tgl::-moz-selection,
.checkbox-wrapper-10 .tgl:after::-moz-selection,
.checkbox-wrapper-10 .tgl:before::-moz-selection,
.checkbox-wrapper-10 .tgl *::-moz-selection,
.checkbox-wrapper-10 .tgl *:after::-moz-selection,
.checkbox-wrapper-10 .tgl *:before::-moz-selection,
.checkbox-wrapper-10 .tgl + .tgl-btn::-moz-selection,
.checkbox-wrapper-10 .tgl::selection,
.checkbox-wrapper-10 .tgl:after::selection,
.checkbox-wrapper-10 .tgl:before::selection,
.checkbox-wrapper-10 .tgl *::selection,
.checkbox-wrapper-10 .tgl *:after::selection,
.checkbox-wrapper-10 .tgl *:before::selection,
.checkbox-wrapper-10 .tgl + .tgl-btn::selection {
background: none;
}
.checkbox-wrapper-10 .tgl + .tgl-btn {
outline: 0;
display: block;
width: 4em;
height: 2em;
position: relative;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.checkbox-wrapper-10 .tgl + .tgl-btn:after,
.checkbox-wrapper-10 .tgl + .tgl-btn:before {
position: relative;
display: block;
content: "";
width: 50%;
height: 100%;
}
.checkbox-wrapper-10 .tgl + .tgl-btn:after {
left: 0;
}
.checkbox-wrapper-10 .tgl + .tgl-btn:before {
display: none;
}
.checkbox-wrapper-10 .tgl:checked + .tgl-btn:after {
left: 50%;
}
.checkbox-wrapper-10 .tgl-flip + .tgl-btn {
padding: 2px;
transition: all 0.2s ease;
font-family: sans-serif;
perspective: 100px;
}
.checkbox-wrapper-10 .tgl-flip + .tgl-btn:after,
.checkbox-wrapper-10 .tgl-flip + .tgl-btn:before {
display: inline-block;
transition: all 0.4s ease;
width: 100%;
text-align: center;
position: absolute;
line-height: 2em;
font-weight: bold;
color: #fff;
position: absolute;
top: 0;
left: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 4px;
}
.checkbox-wrapper-10 .tgl-flip + .tgl-btn:after {
content: attr(data-tg-on);
background: #02C66F;
transform: rotateY(-180deg);
}
.checkbox-wrapper-10 .tgl-flip + .tgl-btn:before {
background: #FF3A19;
content: attr(data-tg-off);
}
.checkbox-wrapper-10 .tgl-flip + .tgl-btn:active:before {
transform: rotateY(-20deg);
}
.checkbox-wrapper-10 .tgl-flip:checked + .tgl-btn:before {
transform: rotateY(180deg);
}
.checkbox-wrapper-10 .tgl-flip:checked + .tgl-btn:after {
transform: rotateY(0);
left: 0;
background: #7FC6A6;
}
.checkbox-wrapper-10 .tgl-flip:checked + .tgl-btn:active:after {
transform: rotateY(20deg);
}