Active State

Framework7 uses so called "active state" to highlight links and buttons when you tap them. It is done to make F7 app behave like native app, not like a web app.

Active state is a part of built-in Fast Clicks library, so Fast Clicks should be also enabled.

It works almost in the same way as CSS :active selector, it adds active-state class to links and buttons when you tap them. The only difference is that it adds this class after small time interval, this prevents false highlights during page scrolling.

So when you write your CSS styles you should write active states like:

/* Usual state */
.my-button {
    color: red;
}
/* Active/tapped state */
.my-button.active-state {
    color: blue;
}