Πώς να δημιουργήσεις: Προφίλ κουμπιών

Previous page Warning button
Next page Split button

Μάθε πώς να χρησιμοποιείς το CSS για να ρυθμίσεις το στυλ των προφίλ κουμπιών.

Πώς να σχεδιάσεις το στυλ των προφίλ κουμπιών;

Βήμα 1 - Προσθήκη HTML:

<button class="btn success">Success</button>
<button class="btn info">Info</button>
<button class="btn warning">Warning</button>
<button class="btn danger">Danger</button>
<button class="btn default">Default</button>

Βήμα 2 - Προσθήκη CSS:

.btn {
  περιγραφή: 2px solid μαύρο;
  χρώμα-υποβάθρου: λευκό;
  χρώμα: μαύρο;
  απόσταση: 14px 28px;
  χρώμα-σειράς: 16px;
  cursor: pointer;

/* Πράσινο */
.success {
  χρώμα-περιβάλλοντος: #04AA6D;
  χρώμα: πράσινο;

.success:hover {
  χρώμα-υποβάθρου: #04AA6D;
  χρώμα: λευκό;

/* Μπλε */
.info {
  χρώμα-περιβάλλοντος: #2196F3;
  χρώμα: βαθύ μπλε;

.info:hover {
  background: #2196F3;
  χρώμα: λευκό;

/* Πορτοκαλί */
.warning {
  χρώμα-περιβάλλοντος: #ff9800;
  χρώμα: πορτοκαλί;

.warning:hover {
  background: #ff9800;
  χρώμα: λευκό;

/* Κόκκινο */
.danger {
  χρώμα-περιβάλλοντος: #f44336;
  χρώμα: κόκκινο;

.danger:hover {
  background: #f44336;
  χρώμα: λευκό;

/* Γκρι */
.default {
  χρώμα-περιβάλλοντος: #e7e7e7;
  χρώμα: μαύρο;

.default:hover {
  background: #e7e7e7;

Try it yourself

προσθήκη border-radius Απλόχερα, για να δημιουργήσεις κύκλιους κουμπιά με ομαλή πλευρά: