Back to buttons

Live preview

Preview settings

Changes appear as you type. Use Tab to test keyboard focus.

⌘ / Ctrl + S saves locally

Night Day · simontheonlyone

HTML, CSS or Tailwind, and a little JavaScript. One button or a group of up to six.

By simontheonlyone

Remix button

Button submission checks

Checks will appear after the preview updates.

Buttons only: no full pages, forms, cards or navigation. Put scripts in the JavaScript tab. Tailwind uses utilities from HTML and JavaScript; use complete class names. Custom CSS supports plain CSS, without @apply, imports or plugins.

Accessibility quick check

Waiting for the rendered preview…

Try Tab, Enter and Space in the preview. Check the focus ring, hover and disabled states, then enable Reduce motion. These checks are guidance, not an accessibility certification.

Explore freely here. Remix to publish your version with credit to the creator.

About Night Day · simontheonlyone

Night Day · simontheonlyone is an animated CSS button by simontheonlyone. Preview the interaction, customize its HTML, styles and JavaScript, or download the files with creator credit.

Effects and categories
Icon, Animated
Using this example
Copy the HTML or download index.html, style.css and app.js. Test keyboard focus, motion and contrast in your own project.

Usage, Tailwind and licensing questions

Read the source files

HTML

<button>
  <span class="night">Night</span>
  <span class="day">Day</span>
    <svg class="lightning" style="color: rgb(255, 228, 56);" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path d="M5.52.359A.5.5 0 0 1 6 0h4a.5.5 0 0 1 .474.658L8.694 6H12.5a.5.5 0 0 1 .395.807l-7 9a.5.5 0 0 1-.873-.454L6.823 9.5H3.5a.5.5 0 0 1-.48-.641l2.5-8.5z" fill="#ffe438"></path> 
    </svg>
    <svg class="mini-cloud" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> 
      <path d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z"></path>
    </svg>
    <svg class="stars star1" id="IconChangeColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="20" width="20">
      <path d="M208,512,155.62,372.38,16,320l139.62-52.38L208,128l52.38,139.62L400,320,260.38,372.38Z" id="mainIconPathAttribute" fill="yellow"></path>
      <path d="M88,176,64.43,111.57,0,88,64.43,64.43,88,0l23.57,64.43L176,88l-64.43,23.57Z" id="mainIconPathAttribute" fill="yellow"></path>
      <path d="M400,256l-31.11-80.89L288,144l80.89-31.11L400,32l31.11,80.89L512,144l-80.89,31.11Z" id="mainIconPathAttribute" fill="yellow"></path>
    </svg>
    <svg class="stars star2" id="IconChangeColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="20" width="20">
      <path d="M208,512,155.62,372.38,16,320l139.62-52.38L208,128l52.38,139.62L400,320,260.38,372.38Z" id="mainIconPathAttribute" fill="yellow"></path>
      <path d="M88,176,64.43,111.57,0,88,64.43,64.43,88,0l23.57,64.43L176,88l-64.43,23.57Z" id="mainIconPathAttribute" fill="yellow"></path>
      <path d="M400,256l-31.11-80.89L288,144l80.89-31.11L400,32l31.11,80.89L512,144l-80.89,31.11Z" id="mainIconPathAttribute" fill="yellow"></path>
    </svg>
  <span class="cloud left-side"></span>
  <span class="cloud left-side1"></span>
  <span class="cloud middle-side"></span>
  <span class="cloud middle-side1"></span>
  <span class="cloud right-side"></span>
  <span class="cloud right-side1"></span>
  <span class="sun"></span>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="sunshine">
    <path d="M0 0h256v256H0z" fill="none"></path>
    <path class="stroke-000000" d="M128 32v32M195.9 60.1l-22.6 22.6M224 128h-32M195.9 195.9l-22.6-22.6M128 224v-32M60.1 195.9l22.6-22.6M32 128h32M60.1 60.1l22.6 22.6" stroke-width="8" stroke-linejoin="round" stroke-linecap="round" stroke="#fe8a1e" fill="none">
    </path>
  </svg>
  <svg viewBox="0 0 16 16" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg" style="color: rgb(92, 236, 255);" class="cloudflare cloudflare-one">
    <path fill="#5cecff" d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z"></path>
  </svg>
  <svg viewBox="0 0 16 16" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg" style="color: rgb(92, 236, 255);" class="cloudflare cloudflare-two">
    <path fill="#5cecff" d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z"></path>
  </svg>
  <svg viewBox="0 0 16 16" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg" style="color: rgb(92, 236, 255);" class="cloudflare cloudflare-three">
    <path fill="#5cecff" d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z"></path>
  </svg>
</button>

CSS


button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 11em;
  height: 4em;
  border: none;
  border-radius: 2.1em;
  background-color: rgb(23, 56, 128);
  color: whitesmoke;
  font-weight: bold;
  font-size: 17px;
  text-align: center;
  cursor: pointer;
  transition: background-color .2s linear 1.1s,
  color .2s linear 1.1s;
}

button:active,
button:focus {
  background: rgb(254, 138, 30);
}

button .day {
  position: absolute;
  opacity: 0;
  transition: all .2s ease 1.1s;
}

button .night {
  transition: all .2s ease 1.1s;
}

button:active .night,
button:focus .night {
  color: transparent;
}

button:active .day,
button:focus .day {
  opacity: 1;
}
/* mini cloud */
.mini-cloud {
  content: '';
  position: absolute;
  inset: -26% 62%;
  scale: 2;
  opacity: 1;
  color: rgb(150, 150, 150);
  transform: rotate(3deg);
  transition: scale .4s ease .3s,
  opacity .4s ease 1.3s;
  pointer-events: none;
}
/* lightning */
.lightning {
  content: '';
  position: absolute;
  inset: -4% 62%;
  scale: 1.3;
  transform: rotate(15deg);
  transition: all .4s ease .2s,
  opacity .4s ease 1.5s;
  pointer-events: none;
}
/* stars */
.stars {
  content: '';
  position: absolute;
  pointer-events: none;
}

.star1 {
  inset: 15% 10%;
  scale: 1.2;
  opacity: 1;
  transition: all .4s ease .4s,
  opacity .4s ease 1.6s;
}

.star2 {
  inset: 45% 80%;
  scale: 1;
  opacity: 1;
  transition: all .4s ease .5s,
  opacity .4s ease 1.7s;
}
/* cloud */
.cloud {
  content: '';
  position: absolute;
  pointer-events: none;
  border: none;
}

.left-side {
  width: 4.4em;
  height: 4.4em;
  bottom: 0;
  left: -.8em;
  scale: 1;
  border-radius: 50%;
  z-index: -5;
  background-color: rgb(15, 39, 91);
  transition: all .6s ease .6s;
}

.left-side1 {
  width: 4.4em;
  height: 4.4em;
  bottom: 0;
  left: -.4em;
  scale: .95;
  border-radius: 50%;
  z-index: -4;
  background-color: rgb(23, 56, 128);
  transition: all .5s ease .5s;
}

.middle-side {
  width: 9em;
  height: 8.3em;
  bottom: 0;
  left: 1em;
  border-radius: 50%;
  scale: 1;
  z-index: -7;
  background-color: rgb(15, 39, 91);
  transition: scale, bottom, .4s ease .8s, opactiy .2s linear .8s;
}

.middle-side1 {
  width: 9em;
  height: 8.3em;
  bottom: -2px;
  left: 1.1em;
  scale: .95;
  z-index: -6;
  border-radius: 50%;
  background-color: rgb(23, 56, 128);
  transition: scale, bottom, .4s ease .75s, opactiy .2s linear .75s;
}

.right-side {
  width: 5.5em;
  height: 5.5em;
  bottom: -1px;
  right: -1.4em;
  border-radius: 50%;
  scale: .98;
  z-index: -5;
  background-color: rgb(15, 39, 91);
  transition: all .6s ease .7s;
}

.right-side1 {
  width: 5.5em;
  height: 5.5em;
  bottom: 0;
  right: -1.05em;
  border-radius: 50%;
  scale: .92;
  z-index: -4;
  background-color: rgb(23, 56, 128);
  transition: all .5s ease .6s;
}
/* night active animation */
button:active .star1,
button:focus .star1 {
  scale: 0;
  opacity: 0;
}

button:active .star2,
button:focus .star2 {
  scale: 0;
  opacity: 0;
}

button:active .mini-cloud,
button:focus .mini-cloud {
  scale: 0;
  opacity: 0;
}

button:active .lightning,
button:focus .lightning {
  scale: 0;
  opacity: 0;
}

button:active .left-side,
button:focus .left-side,
button:active .left-side1,
button:focus .left-side1 {
  scale: 0;
  opacity: 0;
}

button:active .middle-side,
button:focus .middle-side,
button:active .middle-side1,
button:focus .middle-side1 {
  scale: 0;
  opacity: 0;
  bottom: -40%;
}

button:active .right-side,
button:focus .right-side,
button:active .right-side1,
button:focus .right-side1 {
  scale: 0;
  opacity: 0;
}
/* sun */
.sun {
  position: absolute;
  top: -100%;
  left: -4%;
  width: 12em;
  height: 12em;
  background-color: #fe8a1e;
  /* background: linear-gradient(blue, red); */
  border: none;
  border-radius: 50%;
  scale: 0;
  opacity: 0;
  pointer-events: none;
  z-index: -10;
  pointer-events: none;
  transition: scale .3s ease 1.4s,
      opacity .7s ease;
}

button:active .sun,
button:focus .sun {
  scale: .95;
  opacity: 1;
}
/* sunshine */
.sunshine {
  content: '';
  position: absolute;
  width: 18.5em;
  height: 18.5em;
  scale: 0;
  opacity: 0;
  z-index: -9;
  pointer-events: none;
  animation: spin 15s infinite linear;
  transition: scale .3s ease 1.5s,
  opacity .1s ease;
}

button:active .sunshine,
button:focus .sunshine {
  scale: 1;
  opacity: 1;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.cloudflare {
  position: absolute;
  opacity: 0;
  scale: 0;
  pointer-events: none;
}

.cloudflare-one {
  inset: 5% 77%;
  width: 25px;
  height: 25px;
  transition: scale .3s ease 1.6s,
  opacity .3s ease;
}

.cloudflare-two {
  inset: -43% 45%;
  width: 32px;
  height: 32px;
  transition: scale .3s ease 1.8s,
  opacity .3s ease;
}

.cloudflare-three {
  inset: -10% 17%;
  width: 23px;
  height: 23px;
  transition: scale .3s ease 1.7s,
  opacity .3s ease;
}

button:active .cloudflare,
button:focus .cloudflare {
  scale: 1;
  opacity: 1;
}