Additional color options for buttons

Inspect the full details and code of a selected snippet

<div class="uk-child-width-1-2@m uk-grid-small uk-text-center" uk-grid>
        <div>
          <div class="uk-text-center">
            <p uk-margin>
              <a class="uk-button uk-button-default" href="#">Link</a>
              <button class="uk-button uk-button-default">Button</button>
              <button class="uk-button uk-button-default" disabled>Disabled</button>
            </p>
            <p uk-margin>
              <a class="uk-button uk-button-primary" href="#">Link</a>
              <button class="uk-button uk-button-primary">Button</button>
              <button class="uk-button uk-button-primary" disabled>Disabled</button>
            </p>
            <p uk-margin>
              <a class="uk-button uk-button-secondary" href="#">Link</a>
              <button class="uk-button uk-button-secondary">Button</button>
              <button class="uk-button uk-button-secondary" disabled>Disabled</button>
            </p>
            <p uk-margin>
              <a class="uk-button uk-button-success" href="#">Link</a>
              <button class="uk-button uk-button-success">Button</button>
              <button class="uk-button uk-button-success" disabled>Disabled</button>
            </p>
            <p uk-margin>
              <a class="uk-button uk-button-warning" href="#">Link</a>
              <button class="uk-button uk-button-warning">Button</button>
              <button class="uk-button uk-button-warning" disabled>Disabled</button>
            </p>
            <p uk-margin>
              <a class="uk-button uk-button-danger" href="#">Link</a>
              <button class="uk-button uk-button-danger">Button</button>
              <button class="uk-button uk-button-danger" disabled>Disabled</button>
            </p>
          </div>
        </div>
        <div>
          <div class="uk-text-center">
            <p uk-margin>
              <a class="uk-button uk-button-default-outline" href="#">Link</a>
              <button class="uk-button uk-button-default-outline">Button</button>
              <button class="uk-button uk-button-default-outline" disabled>Disabled</button>
            </p>
            <p uk-margin>
              <a class="uk-button uk-button-primary-outline" href="#">Link</a>
              <button class="uk-button uk-button-primary-outline">Button</button>
              <button class="uk-button uk-button-primary-outline" disabled>Disabled</button>
            </p>
            <p uk-margin>
              <a class="uk-button uk-button-secondary-outline" href="#">Link</a>
              <button class="uk-button uk-button-secondary-outline">Button</button>
              <button class="uk-button uk-button-secondary-outline" disabled>Disabled</button>
            </p>
            <p uk-margin>
              <a class="uk-button uk-button-success-outline" href="#">Link</a>
              <button class="uk-button uk-button-success-outline">Button</button>
              <button class="uk-button uk-button-success-outline" disabled>Disabled</button>
            </p>
            <p uk-margin>
              <a class="uk-button uk-button-warning-outline" href="#">Link</a>
              <button class="uk-button uk-button-warning-outline">Button</button>
              <button class="uk-button uk-button-warning-outline" disabled>Disabled</button>
            </p>
            <p uk-margin>
              <a class="uk-button uk-button-danger-outline" href="#">Link</a>
              <button class="uk-button uk-button-danger-outline">Button</button>
              <button class="uk-button uk-button-danger-outline" disabled>Disabled</button>
            </p>
          </div>
        </div>
      </div>

</div>
  </div>
</div>

body { background-color: #e8ebee; }
a:hover { text-decoration: none; }

:root {
  --color-disabled: #d1d5db;
  --color-default: #6b7280;
  --color-default-hover: #4b5563;
  --color-default-active: #374151;
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;
  --color-primary-active: #1d4ed8;
  --color-secondary: #6366f1;
  --color-secondary-hover: #4f46e5;
  --color-secondary-active: #4338ca;
  --color-success: #22c55e;
  --color-success-hover: #16a34a;
  --color-success-active: #15803d;
  --color-warning: #f59e0b;
  --color-warning-hover: #d97706;
  --color-warning-active: #b45309;
  --color-danger: #ef4444;
  --color-danger-hover: #dc2626;
  --color-danger-active: #b91c1c;
}

.uk-button {
  position: relative;
  height: 40px;
  line-height: 40px;
  min-width: 40px;
  padding: 0 15px;
  border: none !important;
  font-size: 0.875rem;
}
.uk-button-small {
  height: 30px;
  line-height: 30px;
  min-width: 30px;
  padding: 0 10px;
  font-size: 0.75rem;
}
.uk-button-large {
  height: 50px;
  line-height: 50px;
  min-width: 30px;
  padding: 0 40px;
  font-size: 0.875rem;
}
.uk-button-default {
  color: #ffffff !important;
  background-color: var(--color-default) !important;
}
.uk-button-default:hover,
.uk-button-default:focus {
  color: #ffffff !important;
  background-color: var(--color-default-hover) !important;
}
.uk-button-default:active,
.uk-button-default.uk-active {
  color: #ffffff !important;
  background-color: var(--color-default-active) !important;
}
.uk-button-primary {
  color: #ffffff !important;
  background-color: var(--color-primary) !important;
}
.uk-button-primary:hover,
.uk-button-primary:focus {
  color: #ffffff !important;
  background-color: var(--color-primary-hover) !important;
}
.uk-button-primary:active,
.uk-button-primary.uk-active {
  color: #ffffff !important;
  background-color: var(--color-primary-active) !important;
}
.uk-button-secondary {
  color: #ffffff !important;
  background-color: var(--color-secondary) !important;
}
.uk-button-secondary:hover,
.uk-button-secondary:focus {
  color: #ffffff !important;
  background-color: var(--color-secondary-hover) !important;
}
.uk-button-secondary:active,
.uk-button-secondary.uk-active {
  color: #ffffff !important;
  background-color: var(--color-secondary-active) !important;
}
.uk-button-success {
  color: #ffffff !important;
  background-color: var(--color-success) !important;
}
.uk-button-success:hover,
.uk-button-success:focus {
  color: #ffffff !important;
  background-color: var(--color-success-hover) !important;
}
.uk-button-success:active,
.uk-button-success.uk-active {
  color: #ffffff !important;
  background-color: var(--color-success-active) !important;
}
.uk-button-warning {
  color: #ffffff !important;
  background-color: var(--color-warning) !important;
}
.uk-button-warning:hover,
.uk-button-warning:focus {
  color: #ffffff !important;
  background-color: var(--color-warning-hover) !important;
}
.uk-button-warning:active,
.uk-button-warning.uk-active {
  color: #ffffff !important;
  background-color: var(--color-warning-active) !important;
}
.uk-button-danger {
  color: #ffffff !important;
  background-color: var(--color-danger) !important;
}
.uk-button-danger:hover,
.uk-button-danger:focus {
  color: #ffffff !important;
  background-color: var(--color-danger-hover) !important;
}
.uk-button-danger:active,
.uk-button-danger.uk-active {
  color: #ffffff !important;
  background-color: var(--color-danger-active) !important;
}
.uk-button[disabled],
.uk-button.uk-disabled {
  filter: opacity(50%) !important;
}

.uk-button-default-outline {
  background-color: #ffffff !important;
  color: var(--color-default) !important;
  border: 1px solid var(--color-default) !important;
}
.uk-button-default-outline:hover,
.uk-button-default-outline:focus {
  background-color: #ffffff !important;
  color: var(--color-default-hover) !important;
  border: 1px solid var(--color-default-hover) !important;
}
.uk-button-default-outline:active,
.uk-button-default-outline.uk-active {
  background-color: #ffffff !important;
  color: var(--color-default-active) !important;
  border: 1px solid var(--color-default-active) !important;
}
.uk-button-primary-outline {
  background-color: #ffffff !important;
  color: var(--color-primary) !important;
  border: 1px solid var(--color-primary) !important;
}
.uk-button-primary-outline:hover,
.uk-button-primary-outline:focus {
  background-color: #ffffff !important;
  color: var(--color-primary-hover) !important;
  border: 1px solid var(--color-primary-hover) !important;
}
.uk-button-primary-outline:active,
.uk-button-primary-outline.uk-active {
  background-color: #ffffff !important;
  color: var(--color-primary-active) !important;
  border: 1px solid var(--color-primary-active) !important;
}
.uk-button-secondary-outline {
  background-color: #ffffff !important;
  color: var(--color-secondary) !important;
  border: 1px solid var(--color-secondary) !important;
}
.uk-button-secondary-outline:hover,
.uk-button-secondary-outline:focus {
  background-color: #ffffff !important;
  color: var(--color-secondary-hover) !important;
  border: 1px solid var(--color-secondary-hover) !important;
}
.uk-button-secondary-outline:active,
.uk-button-secondary-outline.uk-active {
  background-color: #ffffff !important;
  color: var(--color-secondary-active) !important;
  border: 1px solid var(--color-secondary-active) !important;
}
.uk-button-success-outline {
  background-color: #ffffff !important;
  color: var(--color-success) !important;
  border: 1px solid var(--color-success) !important;
}
.uk-button-success-outline:hover,
.uk-button-success-outline:focus {
  background-color: #ffffff !important;
  color: var(--color-success-hover) !important;
  border: 1px solid var(--color-success-hover) !important;
}
.uk-button-success-outline:active,
.uk-button-success-outline.uk-active {
  background-color: #ffffff !important;
  color: var(--color-success-active) !important;
  border: 1px solid var(--color-success-active) !important;
}
.uk-button-warning-outline {
  background-color: #ffffff !important;
  color: var(--color-warning) !important;
  border: 1px solid var(--color-warning) !important;
}
.uk-button-warning-outline:hover,
.uk-button-warning-outline:focus {
  background-color: #ffffff !important;
  color: var(--color-warning-hover) !important;
  border: 1px solid var(--color-warning-hover) !important;
}
.uk-button-warning-outline:active,
.uk-button-warning-outline.uk-active {
  background-color: #ffffff !important;
  color: var(--color-warning-active) !important;
  border: 1px solid var(--color-warning-active) !important;
}
.uk-button-danger-outline {
  background-color: #ffffff !important;
  color: var(--color-danger) !important;
  border: 1px solid var(--color-danger) !important;
}
.uk-button-danger-outline:hover,
.uk-button-danger-outline:focus {
  background-color: #ffffff !important;
  color: var(--color-danger-hover) !important;
  border: 1px solid var(--color-danger-hover) !important;
}
.uk-button-danger-outline:active,
.uk-button-danger-outline.uk-active {
  background-color: #ffffff !important;
  color: var(--color-danger-active) !important;
  border: 1px solid var(--color-danger-active) !important;
}

Information

Detailed overview of a selected code snippet

yaneony

136

20.03.2025, 01:24:16

28.03.2025, 11:01:00

uk-active, uk-border, uk-button, uk-card, uk-child, uk-container, uk-disabled, uk-flex, uk-grid, uk-margin, uk-padding, uk-text

Comments

Browse user feedback and discussions in detail

Currently in development and will be available soon. Stay tuned for updates!