Back

Create a Mesmeric Sundial Time Toggle Button

Discover how to weave an ancient time-telling aesthetic into a modern toggle button that transitions between day and night modes with appealing visuals.

Component Explanation

How to Build a Mesmeric Sundial Time Toggle Button

HTML Setup: Crafting the Sundial Structure

The core of our Sundial Time Toggle Button is defined in HTML, encapsulated within a <div> that provides a central stage for our button. This button toggles between day and night modes, offering a delightful transition reminiscent of a sundial's grace.

  <div class="sundial-container">
    <button onclick="toggleSundialTime()" class="toggle-sundial-button" aria-label="Toggle Sundial Time">
      <span class="sundial-state">Day Mode</span>
    </button>
  </div>

JavaScript: Animate the Time Transition

Our JavaScript manages the toggling action, responding to user interaction by alternating between two visual states to indicate day and night. The function toggleSundialTime changes button styling and alters the textual cue for users.

  let isDay = true;
  function toggleSundialTime() {
    const sundialButton = document.querySelector('.toggle-sundial-button');
    const stateText = document.querySelector('.sundial-state');
    if (isDay) {
      sundialButton.style.background = 'radial-gradient(circle, rgba(255,223,186,1) 0%, rgba(255,197,61,1) 100%)';
      stateText.textContent = 'Night Mode';
      sundialButton.classList.add('night');
    } else {
      sundialButton.style.background = 'radial-gradient(circle, rgba(54,162,235,1) 0%, rgba(153,217,234,1) 100%)';
      stateText.textContent = 'Day Mode';
      sundialButton.classList.remove('night');
    }
    isDay = !isDay;
  }

CSS: Styling the Sundial Button

The CSS imbues the button with life, infusing it with a calming day-to-night color shift. The button adapts visual cues like background transitions and box-shadow effects, enhancing user engagement through subtle animations.

  .sundial-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  .toggle-sundial-button {
    border: none;
    padding: 20px 40px;
    border-radius: 50px;
    color: white;
    font-size: 18px;
    font-weight: bold;
    transition: background 0.3s, box-shadow 0.3s, transform 0.3s;
    cursor: pointer;
    background: radial-gradient(circle, rgba(54,162,235,1) 0%, rgba(153,217,234,1) 100%);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  }

The .night class introduces rotational animations, pivoting the button like a sundial. This enriches the tactile sensation, providing a fun, visual interaction with smooth rotations and enhanced shadows.

  .night {
    transform: rotate(360deg);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
  }

As we've explored, this Sundial Time Toggle Button is not merely a functional component but a piece of interactive whimsy, guiding users through time in a captivating manner.

Whole code

<div class="sundial-container">
  <button onclick="toggleSundialTime()" class="toggle-sundial-button" aria-label="Toggle Sundial Time">
    <span class="sundial-state">Day Mode</span>
  </button>
</div>


<script>
let isDay = true;
function toggleSundialTime() {
  const sundialButton = document.querySelector('.toggle-sundial-button');
  const stateText = document.querySelector('.sundial-state');
  if (isDay) {
    sundialButton.style.background = 'radial-gradient(circle, rgba(255,223,186,1) 0%, rgba(255,197,61,1) 100%)';
    stateText.textContent = 'Night Mode';
    sundialButton.classList.add('night');
  } else {
    sundialButton.style.background = 'radial-gradient(circle, rgba(54,162,235,1) 0%, rgba(153,217,234,1) 100%)';
    stateText.textContent = 'Day Mode';
    sundialButton.classList.remove('night');
  }
  isDay = !isDay;
}
</script>

<style>
.sundial-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.toggle-sundial-button {
  border: none;
  padding: 20px 40px;
  border-radius: 50px;
  color: white;
  font-size: 18px;
  font-weight: bold;
  transition: background 0.3s, box-shadow 0.3s, transform 0.3s;
  cursor: pointer;
  background: radial-gradient(circle, rgba(54,162,235,1) 0%, rgba(153,217,234,1) 100%);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.night {
  transform: rotate(360deg);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
}
</style>

Create a Mesmeric Sundial Time Toggle Button

Component Explanation

How to Build a Mesmeric Sundial Time Toggle Button

HTML Setup: Crafting the Sundial Structure

JavaScript: Animate the Time Transition

CSS: Styling the Sundial Button

Whole code

Comments

More toggle-buttons

Similar

See also