Emoji Toggle by admin

1 Add to Favorites

HTML Code
CSS Code

:root {
  --hue: 223;
  --bg: hsl(var(--hue), 10%, 90%);
  --fg: hsl(var(--hue), 10%, 10%);
  --trans-dur: 0.5s;
  --trans-timing1: cubic-bezier(0.65, 0, 0.35, 1);
  --trans-timing2: cubic-bezier(0.65, 0, 0.35, 1.5);
  font-size: calc(56px + (120 - 56) * (100vw - 280px) / (3840 - 280));
}

body,
input {
  color: var(--fg);
  font: 1em/1.5 sans-serif;
  transition: background-color var(--trans-dur) var(--trans-timing1),
    color var(--trans-dur) var(--trans-timing1);
}

body {
  background-color: var(--bg);
  display: flex;
  height: 100vh;
}

.switch {
  display: flex;
  margin: auto;
}
.switch__emoji {
  box-shadow: 0.25em 0.25em 0.125em rgba(0, 0, 0, 0.3);
  overflow: hidden;
  pointer-events: none;
  top: 0.25em;
  left: 0.25em;
  width: 1em;
  height: 1em;
}
[dir="rtl"] .switch__emoji {
  right: 0.25em;
  left: auto;
}
.switch__emoji,
.switch__emoji:before,
.switch__emoji:after,
.switch__emoji-eye,
.switch__emoji-mouth,
.switch__emoji-face {
  display: block;
  position: absolute;
}
.switch__emoji,
.switch__emoji:before,
.switch__emoji:after,
.switch__emoji-eye,
.switch__emoji-mouth {
  border-radius: 50%;
}
.switch__emoji:before,
.switch__emoji:after {
  content: "";
  width: 100%;
  height: 100%;
  transform: translateZ(0);
}
.switch__emoji:before {
  background-color: #f2c40d;
  box-shadow: -0.25em -0.25em 0.25em #c29d0a inset,
    0.1875em 0.1875em 0.25em #f9e286 inset;
}
.switch__emoji:after {
  box-shadow: 0 0 0.125em 0.0625em rgba(245, 208, 61, 0.5) inset;
}
.switch__emoji,
.switch__emoji-face {
  transform-style: preserve-3d;
  transition: transform var(--trans-dur) var(--trans-timing2);
}
.switch__emoji-eye,
.switch__emoji-mouth {
  backface-visibility: hidden;
}
.switch__emoji-eye {
  border: 0.0625em solid hsl(var(--hue), 10%, 10%);
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  width: 0.25em;
  height: 0.25em;
  transform: translate(-50%, -50%) rotateY(-22.5deg) translateZ(0.5em)
    rotateZ(45deg);
}
.switch__emoji-eye + .switch__emoji-eye {
  transform: translate(-50%, -50%) rotateY(22.5deg) translateZ(0.5em)
    rotateZ(45deg);
}
.switch__emoji-mouth {
  background-image: radial-gradient(
      100% 100% at 50% 100%,
      #f2180d 20%,
      #f5463d 33%,
      rgba(245, 70, 61, 0) 35%
    ),
    radial-gradient(100% 100% at 75% 113%, black 26%, rgba(0, 0, 0, 0) 35%),
    linear-gradient(
      rgba(0, 0, 0, 0) 50%,
      black 50% 55%,
      hsl(var(--hue), 10%, 10%) 65%
    );
  top: 50%;
  left: 50%;
  width: 0.5em;
  height: 0.5em;
  transform: translate(-50%, -50%) rotateX(-15deg) translateZ(0.5em);
}
.switch__emoji-face {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotateY(0);
}
.switch__emoji-face + .switch__emoji-face {
  transform: rotateY(-180deg);
}
.switch__emoji-face--sad .switch__emoji-eye {
  background-color: hsl(var(--hue), 10%, 10%);
  border: 0;
  width: 0.1875em;
  height: 0.1875em;
}
.switch__emoji-face--sad .switch__emoji-mouth {
  background-image: none;
  border: 0.0625em solid transparent;
  border-top-color: hsl(var(--hue), 10%, 10%);
  transform: translate(-50%, 0) rotateX(-20deg) translateZ(0.5em);
}
.switch__input,
.switch__label {
  -webkit-tap-highlight-color: transparent;
}
.switch__input {
  background-color: hsl(var(--hue), 10%, 80%);
  border-radius: 0.75em;
  box-shadow: 0.0625em 0.0625em 0.0625em white inset,
    -0.0625em -0.0625em 0.0625em hsl(var(--hue), 10%, 80%) inset,
    0 0 0 0.125em hsl(var(--hue), 10%, 90%) inset,
    0.25em 0.25em 0.125em rgba(0, 0, 0, 0.3) inset,
    0.0625em 0.0625em 0.0625em rgba(0, 0, 0, 0.3);
  cursor: pointer;
  display: block;
  width: 2.5em;
  height: 1.5em;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color var(--trans-dur) var(--trans-timing1),
    box-shadow var(--trans-dur) var(--trans-timing1);
}
.switch__input:checked {
  background-color: #0ac213;
}
.switch__input:checked + .switch__emoji {
  transform: translateX(100%);
}
[dir="rtl"] .switch__input:checked + .switch__emoji {
  transform: translateX(-100%);
}
.switch__input:checked + .switch__emoji .switch__emoji-face {
  transform: rotateY(179.99deg);
}
[dir="rtl"] .switch__input:checked + .switch__emoji .switch__emoji-face {
  transform: rotateY(-179.99deg);
}
.switch__input:checked
  + .switch__emoji
  .switch__emoji-face
  + .switch__emoji-face {
  transform: rotateY(0);
}
[dir="rtl"]
  .switch__input:checked
  + .switch__emoji
  .switch__emoji-face
  + .switch__emoji-face {
  transform: rotateY(-360deg);
}
.switch__label,
.switch__wrapper {
  display: block;
}
.switch__label {
  margin-inline-start: 0.5em;
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
}
.switch__wrapper {
  position: relative;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: hsl(var(--hue), 10%, 10%);
    --fg: hsl(var(--hue), 10%, 90%);
  }

.switch__input {
    background-color: hsl(var(--hue), 10%, 20%);
    box-shadow: 0.0625em 0.0625em 0.0625em hsl(var(--hue), 10%, 25%) inset,
      -0.0625em -0.0625em 0.0625em hsl(var(--hue), 10%, 20%) inset,
      0 0 0 0.125em hsl(var(--hue), 10%, 30%) inset,
      0.25em 0.25em 0.125em rgba(0, 0, 0, 0.3) inset,
      0.0625em 0.0625em 0.0625em rgba(0, 0, 0, 0.3);
  }
}

Uploaded: 12th July 2024

Tags: #emoji, #toggle, #happy, #sad, #switch

CSSPortal

( admin )

We share content found online. We don't claim credit of anything posted here. If you see your work, let us know and we can move it to your account.

•Website•X (Twitter)

CSS Properties Used

There are 29 CSS properties used in the above example. Click to view and learn about each property.

font-size color font transition background-color display height margin box-shadow overflow pointer-events top left width right position border-radius content transform transform-style backface-visibility border border-right-color border-bottom-color background-image border-top-color cursor appearance margin-inline-start