Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Single Element Split Button
<a href="#" data-split-btn="Your Text Here"></a>

Single Element Split Button

This creates a split button using a single element, it uses pseudo elements and data attributes.

A Pen by zomars on CodePen.

License.

@import "compass/css3";
body {
background-color: #000;
}
/**
Button Component taken from inuit.css
https://github.com/inuitcss/objects.buttons
*/
.btn {
display: inline-block;
vertical-align: middle;
font: inherit;
text-align: center;
border: none;
margin: 0;
cursor: pointer;
overflow: visible;
padding: 12px 24px;
background-color: #4A8EC2;
&,
&:hover,
&:active,
&:focus {
text-decoration: none;
color: #4A8EC2;
}
}
// Custom skinning
.btn--primary {
padding: .5em .8em;
background-image: linear-gradient( 0deg, #64b200 0%, #91cb00 100%);
color: #fff;
}
/*
This creates a splitted button in two parts
Example usage:
<a href="#" data-split-btn="Your Text Here"></a>
*/
[data-split-btn] {
&:before {
// Basic Structure
@extend .btn;
// Skinning
@extend .btn--primary;
// Here we show the text attribute
content: attr(data-split-btn);
// This is for the split effect
border-top-left-radius: 10px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 10px;
}
&:after {
content: '>';
// Basic Structure
@extend .btn;
// Skinning
@extend .btn--primary;
// This is for the split effect
margin-left: 5px;
border-top-left-radius: 0;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment