Split Buttons
Primary action + dropdown caret, grouped and sized split buttons.
Primary Split Button
<div class="uk-split-btn-group">
<button class="uk-split-btn-main">Save Changes</button>
<button class="uk-split-btn-caret"><i class="fas fa-chevron-down"></i></button>
</div>
<style>
.uk-split-btn-group { display: inline-flex; }
.uk-split-btn-main {
padding: 0.6rem 1.25rem; background: #1e3a8a; color: #fff;
border: none; font-weight: 600; font-size: 0.9rem;
border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem;
cursor: pointer; transition: background 0.15s;
}
.uk-split-btn-main:hover { background: #0f2a5c; }
.uk-split-btn-caret {
padding: 0 0.75rem; background: #1e3a8a; color: #fff;
border: none; border-left: 1px solid rgba(255,255,255,0.2);
border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem;
cursor: pointer; transition: background 0.15s; font-size: 0.75rem;
}
.uk-split-btn-caret:hover { background: #0f2a5c; }
</style>
Outline Split Button
<div class="uk-split-btn-group uk-split-outline">
<button class="uk-split-btn-main">Export</button>
<button class="uk-split-btn-caret"><i class="fas fa-chevron-down"></i></button>
</div>
<style>
.uk-split-btn-group { display: inline-flex; }
.uk-split-btn-main {
padding: 0.6rem 1.25rem; background: transparent; color: #1e3a8a;
border: 1px solid #1e3a8a; font-weight: 600; font-size: 0.9rem;
border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem;
cursor: pointer; transition: all 0.15s;
}
.uk-split-btn-main:hover { background: #eef2f8; }
.uk-split-btn-caret {
padding: 0 0.75rem; background: transparent; color: #1e3a8a;
border: 1px solid #1e3a8a; border-left: none;
border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem;
cursor: pointer; transition: all 0.15s; font-size: 0.75rem;
}
.uk-split-btn-caret:hover { background: #eef2f8; }
</style>
Large Split Button
<div class="uk-split-btn-group uk-split-lg">
<button class="uk-split-btn-main">Publish Now</button>
<button class="uk-split-btn-caret"><i class="fas fa-chevron-down"></i></button>
</div>
<style>
.uk-split-btn-group { display: inline-flex; }
.uk-split-lg .uk-split-btn-main {
padding: 0.8rem 1.75rem; font-size: 1rem;
}
.uk-split-lg .uk-split-btn-caret {
padding: 0 1rem; font-size: 0.85rem;
}
.uk-split-btn-main {
background: #1e3a8a; color: #fff; border: none; font-weight: 600;
border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem;
cursor: pointer; transition: background 0.15s;
}
.uk-split-btn-main:hover { background: #0f2a5c; }
.uk-split-btn-caret {
background: #1e3a8a; color: #fff; border: none;
border-left: 1px solid rgba(255,255,255,0.2);
border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem;
cursor: pointer; transition: background 0.15s;
}
.uk-split-btn-caret:hover { background: #0f2a5c; }
</style>
Success Split Button
<div class="uk-split-btn-group uk-split-success">
<button class="uk-split-btn-main">Approve</button>
<button class="uk-split-btn-caret"><i class="fas fa-chevron-down"></i></button>
</div>
<style>
.uk-split-btn-group { display: inline-flex; }
.uk-split-btn-main {
padding: 0.6rem 1.25rem; background: #10b981; color: #fff;
border: none; font-weight: 600; font-size: 0.9rem;
border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem;
cursor: pointer; transition: background 0.15s;
}
.uk-split-btn-main:hover { background: #059669; }
.uk-split-btn-caret {
padding: 0 0.75rem; background: #10b981; color: #fff;
border: none; border-left: 1px solid rgba(255,255,255,0.2);
border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem;
cursor: pointer; transition: background 0.15s; font-size: 0.75rem;
}
.uk-split-btn-caret:hover { background: #059669; }
</style>
Danger Split Button
<div class="uk-split-btn-group uk-split-danger">
<button class="uk-split-btn-main">Delete</button>
<button class="uk-split-btn-caret"><i class="fas fa-chevron-down"></i></button>
</div>
<style>
.uk-split-btn-group { display: inline-flex; }
.uk-split-btn-main {
padding: 0.6rem 1.25rem; background: #ef4444; color: #fff;
border: none; font-weight: 600; font-size: 0.9rem;
border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem;
cursor: pointer; transition: background 0.15s;
}
.uk-split-btn-main:hover { background: #dc2626; }
.uk-split-btn-caret {
padding: 0 0.75rem; background: #ef4444; color: #fff;
border: none; border-left: 1px solid rgba(255,255,255,0.2);
border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem;
cursor: pointer; transition: background 0.15s; font-size: 0.75rem;
}
.uk-split-btn-caret:hover { background: #dc2626; }
</style>
Dark Mode Split Button
<div class="uk-split-btn-group uk-split-dark">
<button class="uk-split-btn-main">Options</button>
<button class="uk-split-btn-caret"><i class="fas fa-chevron-down"></i></button>
</div>
<style>
.uk-split-btn-group { display: inline-flex; }
.uk-split-btn-main {
padding: 0.6rem 1.25rem; background: #0f172a; color: #fff;
border: none; font-weight: 600; font-size: 0.9rem;
border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem;
cursor: pointer; transition: background 0.15s;
}
.uk-split-btn-main:hover { background: #1e293b; }
.uk-split-btn-caret {
padding: 0 0.75rem; background: #0f172a; color: #fff;
border: none; border-left: 1px solid rgba(255,255,255,0.1);
border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem;
cursor: pointer; transition: background 0.15s; font-size: 0.75rem;
}
.uk-split-btn-caret:hover { background: #1e293b; }
</style>