Reporter - Custom CSS for Buttons and Animation Effects. It Works!

LakesGISMaps

The button that is clicked to create/fill out the report form in the reporter app can be targeted to change the color and add effects to it.  All of the other buttons can be targeted as well. I used an animation to get people's attention on where to click to create a report:

/* Define the animation sequence for a pulsing button with a glow */
@keyframes pulse-scale-glow {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.9); /* Opaque red */
  }
  50% {
    transform: scale(1.05); /* Scales the button slightly larger */
    box-shadow: 0 0 0 15px rgba(255, 0, 0, 0); /* Fading red */
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
  }
}

/* Apply the styles and animation only to the "Create a Request" button */
calcite-button[slot="footer"] 
  --calcite-color-brand: red;
  --calcite-font-weight-normal: bold;
  animation: pulse-scale-glow 2s infinite;
}

/* Pause the animation when the button is hovered over */
calcite-button[slot="footer"]:hover {
  animation-play-state: paused;
}​

 

to find the name for the calcite button, I right-clicked the button and then chose inspect.  In the Elements tab, this will give you the name of the button to target.  In this case, this is the name of the button:  slot="footer"

 

khutchins

Great info thanks for sharing. One quick caveat about adding animation to your site is that it can cause accessibility issues. Some users have motion sensitivity and others find it a distraction - some of these users set prefers-reduced-motion on their computer to let web apps that honor this setting know that they prefer less animation on the site. You could update your css to respect this by modifying your css to check for prefers-reduced-motion here's an example:

 

 

@media (prefers-reduced-motion: no-preference) {
  @keyframes pulse-scale-glow {
    0% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.9);
    }
    50% {
      transform: scale(1.05);
      box-shadow: 0 0 0 15px rgba(255, 0, 0, 0);
    }
    100% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
    }
  }

  calcite-button[slot="footer"] {
    --calcite-color-brand: red;
    --calcite-font-weight-normal: bold;
    animation: pulse-scale-glow 2s infinite;
  }

  calcite-button[slot="footer"]:hover {
    animation-play-state: paused;
  }
}