react-spotlight-tour-cct/src/components/TourGuideButtons.css

A lightweight and customizable React component for creating guided tours in your web applications. Highlight elements and display step-by-step instructions to guide users through your app's features.

.popup-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 50px;
    gap: 6px;
  }
  
  .left-buttons,
  .right-buttons {
    display: flex;
    gap: 5px;
  }
  
  .left-buttons {
    justify-content: flex-start;
  }
  
  .right-buttons {
    justify-content: flex-end;
  }
  
  .button-close {
    position: absolute;
    top: 0px;
    right: 0px;
    background: transparent;
    border: none;
    font-size: 20px;
   
    color: rgb(212, 45, 45);
    cursor: pointer;
  }
  
  .button-skip,
  .button-next,
  .button-previous {
    padding: 6px 6px;
    font-size: 12px;
    cursor: pointer;
    border-radius: 10px;
    transition: background-color 0.2s;
  }
  
  .button-previous {
    background-color: black;
    color: white;
  }
  
  .button-previous:disabled {
    background-color: slategray;
  }
  
  .button-next {
    background-color: blue;
    border: none;
    outline: none;
    color: rgb(255, 255, 134);
  }
  
  .button-skip {
    background-color: white;
    color: green;
  }
  
  
  .count-button {
    padding: 6px 6px;
    font-size: 12px;
    cursor: pointer;
    color: rgb(255, 255, 255);
    background-color: #0da505;
    transition: background-color 0.2s;
    margin-bottom: 2px;
    bottom: 0;
  }
  .button-restart {
    position: fixed;
    top: 10px;
    right: 10px;
    background-color: #007bff; /* Blue color */
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
    z-index: 1002; /* Ensure it stays above other elements */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, transform 0.2s ease;
  }
  
  .button-restart:hover {
    background-color: #0056b3; /* Darker blue on hover */
    transform: scale(1.05);
  }
  
  .button-restart:active {
    transform: scale(0.95);
  }

  .button-restart {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 10px 20px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    z-index: 1050;
    transition: background-color 0.3s ease;
  }
  
  .button-restart:hover {
    background-color: #218838;
  }
  
  .button-restart:focus {
    outline: none;
  }

    /* Responsive button styles */
@media (max-width: 600px) {
  /* Adjust the general button appearance */
  .button-restart,
  .button-next,
  .button-prev {
    padding: 12px 20px; /* Increase padding for better touchability */
    font-size: 14px; /* Slightly larger font size for readability */
    border-radius: 25px; /* Rounded corners for a more modern look */
    background-color: #4caf50; /* Green background */
    color: #ffffff; /* White text */
    border: none; /* Remove border for cleaner look */
    cursor: pointer; /* Change cursor to pointer on hover */
    transition: background-color 0.3s, transform 0.2s; /* Add smooth transition */
    display: inline-block; /* Align buttons inline */
    margin: 8px 0; /* Add spacing between buttons */
    text-align: center; /* Center text inside the buttons */
    width: 100%; /* Make buttons take up full width on smaller screens */
    box-sizing: border-box; /* Include padding in the button's width */
  }

  /* Hover effect */
  .button-restart:hover,
  .button-next:hover,
  .button-prev:hover {
    background-color: #45a049; /* Darker green on hover */
    transform: translateY(-2px); /* Slight upward movement on hover */
  }

  /* Active (pressed) state */
  .button-restart:active,
  .button-next:active,
  .button-prev:active {
    background-color: #388e3c; /* Even darker green when button is pressed */
    transform: translateY(0); /* Reset transform when pressed */
  }

  /* Focus state */
  .button-restart:focus,
  .button-next:focus,
  .button-prev:focus {
    outline: none; /* Remove default focus outline */
    box-shadow: 0 0 4px rgba(72, 199, 96, 0.6); /* Green glow on focus */
  }
  
  /* Button style for restart button with a distinct color */
  .button-restart {
    background-color: #ff9800; /* Orange color */
  }

  .button-restart:hover {
    background-color: #fb8c00; /* Darker orange on hover */
  }

  .button-restart:active {
    background-color: #f57c00; /* Even darker orange on click */
  }

  /* Button style for previous button */
  .button-prev {
    background-color: #2196f3; /* Blue color */
  }

  .button-prev:hover {
    background-color: #1976d2; /* Darker blue on hover */
  }

  .button-prev:active {
    background-color: #1565c0; /* Even darker blue on click */
  }
  
  /* Button style for next button */
  .button-next {
    background-color: #4caf50; /* Green color */
  }

  .button-next:hover {
    background-color: #388e3c; /* Darker green on hover */
  }

  .button-next:active {
    background-color: #2e7d32; /* Even darker green on click */
  }
}