[openstreetmap/openstreetmap-website] Lack of css active and hover states (Issue #7067)

[Stillhart]

stillhart created an issue (openstreetmap/openstreetmap-website#7067)

### Problem

# The CSS active state
When navigating the openstreetmap website, it sometimes feels "old" or "unresponsive" due to the lack of css active states. CSS active states are a simple intermediate state that shows the user that his action has been registered. Once the action has been executed, bootstrap provides an always on "active" state to show on which page/tab/state we are. 

<img width="480" height="197" alt="Image" src="https://github.com/user-attachments/assets/e7d64e02-7d69-4ac5-9b75-5602737b9fa5" />

As one can see in the video, I even had to enable this circle around click in order to visualize the clicks. Active states do exactly that, they show what is clicked and stay active while the mouse button is down.

This is likely entirely due to bootstrap which doesn't implement active states all that often.

The openstreetmap-website doesn't use active states either. One of the few examples seems top be here where hover and active are mapped to the same. 
```
  #edit_tab .btn-outline-primary {
    @include button-outline-variant($green, $color-hover: $white, $active-color: $white);
  }
```

The situation gets worse with bad internet. Active states really help here. A user might wait a long time, or click again, if the website doesn't respond to the new state immediately. The active state helps here to confirm that the input has been received and is being processed.

# The CSS hover state

Slightly related is the lack of css hover states, especially in the navbar which I consider the most critical. Again, this seems to be related to bootstrap.

Buttons do have a hover effect, but input fields don't. 

## Further CSS features

Even further is the usage of focus and rings, but these are more messy to implement in my opinion. The focus with `tab` seems to be often quite fine though.

### Description

In general, "Adobe Spectrum" has some really good unopinionated guidelines and examples on UI creation.

The most relevant one is this one about states: https://spectrum.adobe.com/page/states/
This one about tabs which mentions the states at the bottom: https://spectrum.adobe.com/page/tabs/
This one about search forms: https://spectrum.adobe.com/page/search-field/

I would propose to may slightly fine tune bootstrap to get these active and hover states into navbar. Most buttons could get a soft hover state too. At the same time, maybe even more defaults could be slightly improved.

I am not certain if drifting away that much from bootstrap is desired though.

Personally I'm a big fan of hover and active states. They make a UI feel really responsive without interfering with the visuals too much. 

Something I didn't get into, but some of these also improve the mobile touch experience.

### Screenshots

_No response_

-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/issues/7067
You are receiving this because you are subscribed to this thread.

Message ID: <openstreetmap/openstreetmap-website/issues/7067 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20260506/50442542/attachment-0001.htm>