```
const reactions = document.querySelectorAll('.reactions > div');
const reactionsParent = document.querySelector('.reactions')

reactions.forEach(reaction => {
reaction.addEventListener('click', function(){

})

})

// demo heart reaction
setTimeout(function(){
const heartReaction = document.querySelector('.reactions div.love');
reactionsParent.classList.add('wave');
heartReaction.classList.add('active');
setTimeout(function(){
reactionsParent.classList.remove('wave');
},875)
},2000)
```

```

box-shadow: 0 50px 0 orangered, 50px 0 0 orangered, -50px 0 0 orangered, 0 -50px 0 orangered;
margin: 0 0 0 0;
}
body .reactions > div.laugh {
transition: none;
}
body .reactions > div.laugh:hover {
color: #ff7500;
box-shadow: inset 0 0 0 1px #ff7500;
}
body .reactions > div.laugh:before, body .reactions > div.laugh:after {
background-color: transparent;
box-shadow: 0 0 0 #ff7500, 0 0 0 #ff7500, 0 0 0 #ff7500, 0 0 0 #ff7500;
}
body .reactions > div.laugh.active {
background-color: #ff7500;
text-shadow: 0 1px 2px #b35200;
box-shadow: inset 0 0 0 1px #b35200, inset 0 2px 4px #cc3700;
color: white;
transition: all 0.35s 0.5s cubic-bezier(0.72, -0.01, 0.34, 1);
}
body .reactions > div.laugh.active > span {
animation: laughHard 2s 0.6s cubic-bezier(0.72, -0.01, 0.34, 1) forwards;
}
body .reactions > div.laugh.active:before, body .reactions > div.laugh.active:after {
transition: all 0.8s 0.625s cubic-bezier(0, -0.02, 0.04, 1);
height: 0;
width: 0;
box-shadow: 0 50px 0 #ff7500, 50px 0 0 #ff7500, -50px 0 0 #ff7500, 0 -50px 0 #ff7500;
margin: 0 0 0 0;
}
body .reactions > div.cry {
transition: none;
}
body .reactions > div.cry:hover {
color: #00b4ff;
box-shadow: inset 0 0 0 1px #00b4ff;
}
body .reactions > div.cry:before, body .reactions > div.cry:after {
background-color: transparent;
box-shadow: 0 0 0 #00b4ff, 0 0 0 #00b4ff, 0 0 0 #00b4ff, 0 0 0 #00b4ff;
}
body .reactions > div.cry.active {
background-color: #00b4ff;
text-shadow: 0 1px 2px #005a80;
box-shadow: inset 0 0 0 1px #007eb3, inset 0 2px 4px #0090cc;
color: white;
transition: all 0.35s 0.625s cubic-bezier(0.72, -0.01, 0.34, 1);
}
body .reactions > div.cry.active > span {
animation: sadDroop 2s 0.75s cubic-bezier(0.72, -0.01, 0.34, 1) forwards;
}
body .reactions > div.cry.active:before, body .reactions > div.cry.active:after {
transition: all 0.8s 0.75s cubic-bezier(0, -0.02, 0.04, 1);
height: 0;
width: 0;
box-shadow: 0 50px 0 #00b4ff, 50px 0 0 #00b4ff, -50px 0 0 #00b4ff, 0 -50px 0 #00b4ff;
margin: 0 0 0 0;
}

@keyframes bounce {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-50px);
}
100% {
transform: translateY(0);
}
}
@keyframes thumbsUp {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(-30deg);
}
40% {
transform: rotate(40deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes heartBeat {
0% {
transform: scale(1);
}
5% {
transform: scale(1.2);
}
10% {
transform: scale(1);
}
15% {
transform: scale(1.2);
}
20% {
transform: scale(1);
}
40% {
transform: scale(1);
}
45% {
transform: scale(1.2);
}
50% {
transform: scale(1);
}
55% {
transform: scale(1.2);
}
60% {
transform: scale(1);
}
80% {
transform: scale(1);
}
85% {
transform: scale(1.2);
}
90% {
transform: scale(1);
}
95% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
@keyframes laughHard {
0% {
transform: rotate(0deg) scale(1);
}
25% {
transform: rotate(-20deg) scale(1.1);
}
50% {
transform: rotate(20deg) scale(1);
}
75% {
transform: rotate(-20deg) scale(1.2);
}
100% {
transform: rotate(0deg) scale(1);
}
}
@keyframes sadDroop {
0% {
transform: translateY(0);
}
80% {
transform: translateY(5px) rotate(40deg);
}
93% {
transform: translateY(-2px) rotate(-10deg);
}
100% {
transform: translateY(0px);
}
}/# sourceMappingURL=salom.css.map /
```

```

```

```
, :before, *:after {
box-sizing: border-box;
}

body, html {
margin: 0;
height: 100%;
}

body {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
body .reactions {
width: 216px;
height: 66px;
display: flex;
border: 1px solid #d9d9d9;
background-image: linear-gradient(to top, #f7f7f7, white);
padding: 8px;
border-radius: 45px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
}
body .reactions.wave .like {
animation: bounce 0.5s cubic-bezier(0.72, -0.01, 0.34, 1) forwards;
}
body .reactions.wave .love {
animation: bounce 0.5s 0.125s cubic-bezier(0.72, -0.01, 0.34, 1) forwards;
}
body .reactions.wave .laugh {
animation: bounce 0.5s 0.25s cubic-bezier(0.72, -0.01, 0.34, 1) forwards;
}
body .reactions.wave .cry {
animation: bounce 0.5s 0.375s cubic-bezier(0.72, -0.01, 0.34, 1) forwards;
}
body .reactions > div {
flex: 0 0 calc(25% - 10px);
margin: 5px;
border-radius: 100%;
background-color: white;
transition: background-color 0.5s cubic-bezier(0.72, -0.01, 0.34, 1);
position: relative;
z-index: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
color: #666666;
}
body .reactions > div:before {
content: "";
position: absolute;
z-index: 0;
top: 50%;
left: 50%;
margin: -3px 0 0 -3px;
display: block;
height: 6px;
width: 6px;
border-radius: 100%;
transform: rotate(45deg) scale(1);
}
body .reactions > div:after {
content: "";
position: absolute;
z-index: 0;
top: 50%;
left: 50%;
margin: -5px 0 0 -5px;
display: block;
height: 10px;
width: 10px;
border-radius: 100%;
transform: rotate(90deg) scale(1);
}
body .reactions > div > span {
position: relative;
z-index: 1;
}
body .reactions > div.active {
z-index: 1;
}
body .reactions > div.like {
transition: none;
}
body .reactions > div.like:hover {
color: #00de54;
box-shadow: inset 0 0 0 1px #00de54;
}
body .reactions > div.like:before, body .reactions > div.like:after {
background-color: transparent;
box-shadow: 0 0 0 #00de54, 0 0 0 #00de54, 0 0 0 #00de54, 0 0 0 #00de54;
}
body .reactions > div.like.active {
background-color: #00de54;
text-shadow: 0 1px 2px #00782d;
box-shadow: inset 0 0 0 1px #00ab41, inset 0 2px 4px #00ab41;
color: white;
transition: all 0.35s 0.25s cubic-bezier(0.72, -0.01, 0.34, 1);
}
body .reactions > div.like.active > span {
animation: thumbsUp 0.6s 0.2s cubic-bezier(0.72, -0.01, 0.34, 1) forwards;
}
body .reactions > div.like.active:before, body .reactions > div.like.active:after {
transition: all 0.8s 0.375s cubic-bezier(0, -0.02, 0.04, 1);
height: 0;
width: 0;
box-shadow: 0 50px 0 #00de54, 50px 0 0 #00de54, -50px 0 0 #00de54, 0 -50px 0 #00de54;
margin: 0 0 0 0;
}
body .reactions > div.love {
transition: none;
}
body .reactions > div.love:hover {
color: orangered;
box-shadow: inset 0 0 0 1px orangered;
}
body .reactions > div.love:before, body .reactions > div.love:after {
background-color: transparent;
box-shadow: 0 0 0 orangered, 0 0 0 orangered, 0 0 0 orangered, 0 0 0 orangered;
}
body .reactions > div.love.active {
background-color: orangered;
text-shadow: 0 1px 2px #992900;
box-shadow: inset 0 0 0 1px #992900, inset 0 2px 4px #b33000;
color: white;
transition: all 0.35s 0.375s cubic-bezier(0.72, -0.01, 0.34, 1);
}
body .reactions > div.love.active > span {
animation: heartBeat 3s 0.6s cubic-bezier(0.72, -0.01, 0.34, 1) forwards;
}
body .reactions > div.love.active:before, body .reactions > div.love.active:after {
height: 0;
width: 0;
transition: all 0.8s 0.5s cubic-bezier(0, -0.02, 0.04, 1);
```

Command line buyruqlari
Git bash uchun

<label>     <input type="checkbox">     <span></span>     <i class="indicator"></i>   </label>   <label>     <input type="checkbox" checked>     <span></span>     <i class="indicator"></i>   </label>

Css

body{     display: flex;     justify\-content: center;     align\-items: center;     min\-height: 100vh;     flex\-direction: column;     background: \#2b2b2b; } label{   position: relative;   margin: 5px 0;   cursor: pointer; } label input{   appearance: none;   display: none; } label span{   position: relative;   display: block;   width: 80px;   height: 40px;   background: \#222;   border\-radius: 40px;   box\-shadow: inset 0 2px 15px rgba(0,0,0,0.2),   inset 0 2px 2px rgba(0,0,0,0.2),   inset 0 \-1px 1px rgba(0,0,0,0.2); } label .indicator{   position: absolute;   top: 0;   left: 0;   width: 40px;   height: 40px;   background: linear\-gradient(to bottom, \#444, \#222);   border\-radius: 50%;   box\-shadow: 0 2px 5px rgba(0,0,0,0.5),   inset 0 1px 1px rgba(255,255,255,0.1);   transition: 0.5s;   transform: scale(0.9); } label input:checked ~ .indicator{   left: 40px; }  label .indicator::before{   content: '';   position: absolute;   top: 50%;   left: 50%;   transform: translate(\-50%, \-50%);   width: 5px;   height: 5px;   background: \#f00;   border\-radius: 50%;   transition: 0.5s;   box\-shadow: 0 0 2px \#f00,   0 0 5px \#f00,   0 0 10px \#f00,   0 0 15px \#f00,   0 0 20px \#f00,   0 0 25px \#f00,   0 0 30px \#f00,   0 0 40px \#f00; } label input:checked ~ .indicator::before{   background: \#0f0;   box\-shadow: 0 0 2px \#0f0,   0 0 5px \#0f0,   0 0 10px \#0f0,   0 0 15px \#0f0,   0 0 20px \#0f0,   0 0 25px \#0f0,   0 0 30px \#0f0,   0 0 40px \#0f0; }

Bu avtoroq kassa bot kodi tarqatdi: @new_dev bu Normanli kod endi barbir kerakmas shuning uchun tarqatdim hammaga xayr manbasiz olmanglar