Modul:Clickable button/styles.css

.module-clickable-button a {
    background-image: linear-gradient(#f9f9f9,transparent)!important;
    
    border-color: #aaaaaa;
    
    color: #222222;
    display: inline-block;
    box-sizing: border-box;
    margin: 0;
    border-width: 1px;
    border-style: solid;
    border-radius: 0;
    vertical-align: middle;
    font-family: inherit;
    font-size: 1em;
    font-weight: normal;
    line-height: 1em;
    text-align: center;
    background-image: none;
    transition-property: background-color, color, border-color, box-shadow;
    transition-duration: 100ms;
    min-height: 22px;
    min-width: 4em;
    max-width: 28.75em;
    padding: 3px 7px;
    text-decoration: none;
    margin-bottom:0px;
    border-radius: 7px;
}
.module-clickable-button a:visited {
    color: #222222;
}
.module-clickable-button a:hover {
    background-color: #ffffff;
    color: #444444;
    cursor: pointer;
}
.module-clickable-button a:focus {
    color: #222222;
    border-color: #0645ad;
    box-shadow: inset 0 0 0 1px #0645ad;
    outline: 1px solid transparent;
}
.module-clickable-button a:active {
    background-color: #eeeeee;
    color: #000000;
    border-color: #767676;
    box-shadow: none;
}
.module-clickable-button a:focus {
    color: #222222;
    border-color: #0645ad;
    box-shadow: inset 0 0 0 1px #0645ad;
    outline: 1px solid transparent;
}
.module-clickable-button a:active {
    background-color: #eeeeee;
    color: #000000;
    border-color: #767676;
    box-shadow: none;
}
.module-clickable-button.module-clickable-button-quiet a,
.module-clickable-button.module-clickable-button-quiet.module-clickable-button-progressive a,
.module-clickable-button.module-clickable-button-quiet.module-clickable-button-destructive a {
    background-color: transparent;
    color: #222222;
    border-color: transparent;
    font-weight: bold;
}
.module-clickable-button.module-clickable-button-quiet a:hover,
.module-clickable-button.module-clickable-button-quiet.module-clickable-button-progressive a:hover,
.module-clickable-button.module-clickable-button-quiet.module-clickable-button-destructive a:hover {
    background-color: rgba(0, 24, 73, 0.027);
    color: #222222;
}
.module-clickable-button.module-clickable-button-quiet a:focus,
.module-clickable-button.module-clickable-button-quiet.module-clickable-button-progressive a:focus,
.module-clickable-button.module-clickable-button-quiet.module-clickable-button-destructive a:focus {
    color: #222222;
    border-color: #0645ad;
    box-shadow: inset 0 0 0 1px #0645ad;
}
.module-clickable-button.module-clickable-button-quiet a:active,
.module-clickable-button.module-clickable-button-quiet.module-clickable-button-progressive a:active,
.module-clickable-button.module-clickable-button-quiet.module-clickable-button-destructive a:active {
    background-color: rgba(0, 24, 73, 0.082);
    color: #000000;
    border-color: #767676;
    box-shadow: none;
}
.module-clickable-button.module-clickable-button-progressive a {
    background-color: #0645ad;
    color: #ffffff;
    border-color: #0645ad;
}
.module-clickable-button.module-clickable-button-progressive a:hover {
    background-color: #447ff5;
    border-color: #447ff5;
}
.module-clickable-button.module-clickable-button-progressive a:focus {
    box-shadow: inset 0 0 0 1px #0645ad, inset 0 0 0 2px #ffffff;
}
.module-clickable-button.module-clickable-button-progressive a:active {
    background-color: #2a4b8d;
    border-color: #2a4b8d;
    box-shadow: none;
}
.module-clickable-button.module-clickable-button-progressive.module-clickable-button-quiet a {
    background-color: rgba(255, 255, 255, 0);
    color: #0645ad;
    border-color: transparent;
}
.module-clickable-button.module-clickable-button-progressive.module-clickable-button-quiet a:hover {
    background-color: rgba(52, 123, 255, 0.2);
    color: #447ff5;
    border-color: transparent;
}
.module-clickable-button.module-clickable-button-progressive.module-clickable-button-quiet a:focus {
    color: #0645ad;
    border-color: #0645ad;
}
.module-clickable-button.module-clickable-button-progressive.module-clickable-button-quiet a:active {
    color: #ffffff;
    background-color: #2a4b8d;
    border-color: #2a4b8d;
}
.module-clickable-button.module-clickable-button-destructive a {
    background-color: #dd0033;
    color: #ffffff;
    border-color: #dd0033;
}
.module-clickable-button.module-clickable-button-destructive a:hover {
    background-color: #ff4242;
    border-color: #ff4242;
}
.module-clickable-button.module-clickable-button-destructive a:focus {
    box-shadow: inset 0 0 0 1px #dd0033, inset 0 0 0 2px #ffffff;
}
.module-clickable-button.module-clickable-button-destructive a:active {
    background-color: #b32424;
    border-color: #b32424;
    box-shadow: none;
}
.module-clickable-button.module-clickable-button-destructive.module-clickable-button-quiet a {
    color: #dd0033;
    background-color: rgba(255, 255, 255, 0);
    border-color: transparent;
}
.module-clickable-button.module-clickable-button-destructive.module-clickable-button-quiet a:hover {
    background-color: #ff4242;
    border-color: transparent;
    color: #ff4242;
}
.module-clickable-button.module-clickable-button-destructive.module-clickable-button-quiet a:focus {
    color: #dd0033;
    border-color: #dd0033;
}
.module-clickable-button.module-clickable-button-destructive.module-clickable-button-quiet a:active {
    color: #ffffff;
    background-color: #b32424;
    border-color: #b32424;
}

/* Styles for night mode: [[Recommendations_for_night_mode_compatibility_on_Wikimedia_wikis]] */
@media screen {
	html.skin-theme-clientpref-night .module-clickable-button a {
	    background-color: #222222;
	    color: #f9f9f9;
	}
	
	html.skin-theme-clientpref-night .module-clickable-button a:hover {
	    color: #ffffff;
	    background-color: #444444;
	}
}

@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .module-clickable-button a {
      background-color: #222222;
      color: #f9f9f9;
  }

  html.skin-theme-clientpref-os .module-clickable-button a:hover {
      color: #ffffff;
      background-color: #444444;
  }
}