Avec w3.css (uniquement) :
Sans w3.css :
Sans w3.css, le réglage peut être plus précis (au niveau des couleurs et du padding) et le code plus simple (et facile à retenir). De plus, avec le w3.css, le bouton "alert" est peu convaincant.
<button class="w3-button w3-light-green w3-hover-green w3-padding-small">Ok</button> <button class="w3-button w3-light-blue w3-hover-blue w3-padding-small">Info</button> <button class="w3-button w3-orange w3-hover-brown w3-padding-small">Warning</button> <button class="w3-button w3-pale-red w3-hover-red w3-padding-small">Danger</button> <button class="w3-button w3-light-gray w3-hover-dark-gray w3-padding-small">Default</button> <button class="btn ok">Ok</button> <button class="btn info">Info</button> <button class="btn warning">Warning</button> <button class="btn danger">Danger</button> <button class="btn">Default</button>
Code CSS
.btn { /* => .btn avant .success, .info, .warning et .danger */
border: none; /* Remove borders */
padding: 5px 10px; /* Add some padding */
cursor: pointer; /* Add a pointer cursor on mouse-over */
background-color: #F1F1F1; /* w3-light-gray */
color: black;
}
.btn:hover {background: #595959; color: white} /* w3-dark-gray */
.ok {background-color: #8BC34A;} /* w3-light-green */
.ok:hover {background-color: #2B642C; color: white} /* w3-green */
.info {background-color: #87CEEB;} /* w3-light-blue */
.info:hover {background-color: #0C5A9D; color: white} /*w3-blue */
.warning {background-color: #FF9800;} /* w3-orange */
.warning:hover {background-color: #714F42; color: white} /* w3-brown */
.danger {background-color: #F4695D;} /* rouge perso */
.danger:hover {background-color: #B2120B; color: white} /* w3-red */
Par rapport à https://www.w3schools.com/howto/howto_css_alert_buttons.asp Le contraste est davantage marqué au niveau des couleurs conformément aux critères sur https://dequeuniversity.com/rules/axe/3.2/color-contrast. De plus, le texte du bouton est noir et devient blanc lors du survol du bouton.