Single Element Split Button

index.html

<a href="#" data-split-btn="Your Text Here"></a>

Single-Element-Split-Button.markdown

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.

style.scss

@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;
  }
}