<div class="centered">
<div id="button-container" style="display:none;">
<div id="button-sm-1" class="button sm first"><div class="label hidden">I</div></div><!--
--><div id="button-sm-2" class="button sm second"><div class="label hidden">II</div></div><!--
--><div id="button-sm-3" class="button sm third"><div class="label hidden">III</div></div><!--
--><div id="button-sm-4" class="button sm fourth"><div class="label hidden">IV</div></div><!--
--><div id="button-lg-1" class="button lg"><div class="label">This Is My Button</div></div>
</div>
</div>@import "compass/css3";
// ====================
// Rounded corners
$default_rounded_amount: 5px;
// Round corner at position by amount.
@mixin round-corner($position, $amount: $default_rounded_amount) {
border-#{$position}-radius: $amount;
border-#{$position}-radius: $amount;
}
@mixin round-corner-mozilla($position, $amount: $default_rounded_amount) {
border-radius-#{$position}: $amount;
}
// Round left corners by amount
@mixin round-left-corners($amount: $default_rounded_amount) {
@include round-corner("top-left", $amount);
@include round-corner("bottom-left", $amount);
@include round-corner-mozilla("topleft", $amount);
@include round-corner-mozilla("bottomleft", $amount);
}
// Round right corners by amount
@mixin round-right-corners($amount: $default_rounded_amount) {
@include round-corner("top-right", $amount);
@include round-corner("bottom-right", $amount);
@include round-corner-mozilla("topright", $amount);
@include round-corner-mozilla("bottomright", $amount);
}
// Round all corners by amount
@mixin round-corners($amount: $default_rounded_amount) {
border-radius: $amount;
border-radius: $amount;
border-radius: $amount;
}
// ====================
// variables
$button_width: 160px;
$button_height: 40px;
$corner_radius: 3px;
$animation_time: 190ms;
$orange: rgba(200, 100, 0, 1.0);
// ====================
html, body {
position: relative;
width: 100%;
height: 100%;
}
body {
background-color: #ecede6;
}
.button {
@include transition(background-color $animation_time ease-out, opacity $animation_time ease-out, border-radius ($animation_time * 0.75) ease-out, left $animation_time ease-out, right $animation_time ease-out, width $animation_time ease-out);
@include round-corners($corner_radius);
background-color: $orange;
text-align: center;
cursor: pointer;
.label {
@include transform-origin(40% 60% 0);
@include transition(opacity $animation_time * 0.8 ease-out, transform ($animation_time * 1.3) ease-out);
font-family: Helvetica, sans-serif;
font-weight: 600;
font-size: 14px;
text-align: center;
line-height: $button_height;
font-smoothing: antialiased;
color: white;
height: 100%;
}
&.lg {}
&.sm {
.label {
@include transform(scale(1.0));
}
.label.small {
@include transform(scale(0.2));
}
&.first {
left: 0px;
}
&.second {
left: 25%;
}
&.third {
right: 25%;
}
&.fourth {
right: 0px;
}
}
&.rounded {
@include round-corners($corner_radius);
}
&.fading {
pointer-events: none;
}
&.fading.out {
.label {
opacity: 0;
}
}
&.fading.in {
.label {
opacity: 1;
}
}
&.sm.fading.in {
.label {
@include transform(scale(1.0));
}
}
&.hidden, .hidden {
pointer-events: none;
opacity: 0;
}
&.over {
background-color: lighten($orange, 5%);
}
&.active {
background-color: darken($orange, 5%);
}
}
.centered {
position: relative;
top: 50%;
@include transform(translateY(-50%));
}
#button-container {
position: relative;
margin: 0 auto;
width: $button_width;
height: $button_height;
.button {
position: absolute;
&.lg {
width: 100%;
height: 100%;
}
&.sm {
display: inline-block;
width: 28%;
height: 100%;
}
}
&.expanding {
pointer-events: none;
}
&.expanded {
.sm {
width:25%;
&.first {
left: -9%;
}
&.second {
left: 22%;
}
&.third {
right: 22%;
}
&.fourth {
right: -9%;
}
}
}
}app = {
tmo_array: null,
initSplitButton: function(init_obj) {
this.is_transitioning = false;
this.tmo_array = [];
this.container = init_obj.container;
this.button_lg = init_obj.large_button;
this.button_sm_array = init_obj.small_buttons;
this.container.style.width = init_obj.width + "px";
this.cleanClassNames_bound = this.cleanClassNames.bind(this);
this.onButtonOver_bound = this.onButtonOver.bind(this);
this.onButtonOut_bound = this.onButtonOut.bind(this);
this.onButtonDown_bound = this.onButtonDown.bind(this);
this.onButtonUp_bound = this.onButtonUp.bind(this);
this.onClick_bound = this.onClick.bind(this);
this.container.addEventListener('mouseover', this.onButtonOver_bound);
this.container.addEventListener('mouseout', this.onButtonOut_bound);
this.container.addEventListener('mousedown', this.onButtonDown_bound);
this.container.addEventListener('mouseup', this.onButtonUp_bound);
this.container.addEventListener('click', this.onClick_bound);
},
onButtonOver: function(e) {
e = e || window.event;
var target = e.target || e.srcElement;
while(target !== this.container) {
if(target.hasAttribute('class') && target.className.indexOf('button') > -1) {
target.className = target.className.replace(/over/g, '').trim() + ' over';
}
target = target.parentNode;
}
},
onButtonOut: function(e) {
e = e || window.event;
var target = e.target || e.srcElement;
while(target !== this.container) {
if(target.hasAttribute('class') && target.className.indexOf('button') > -1) {
target.className = target.className.replace(/over/g, '').trim();
}
target = target.parentNode;
}
},
onButtonDown: function(e) {
e = e || window.event;
var target = e.target || e.srcElement;
while(target !== this.container) {
if(target.hasAttribute('class') && target.className.indexOf('button') > -1) {
target.className = target.className.replace(/active/g, '').trim() + ' active';
}
target = target.parentNode;
}
},
onButtonUp: function(e) {
e = e || window.event;
var target = e.target || e.srcElement;
while(target !== this.container) {
if(target.hasAttribute('class') && target.className.indexOf('button') > -1) {
target.className = target.className.replace(/active/g, '').trim();
}
target = target.parentNode;
}
},
onClick: function(e) {
if(this.is_transitioning) {
return;
}
//
var this_el = e.target;
while(this_el.className.indexOf("button") === -1) {
this_el = this_el.parentNode;
console.log("Button pressed: " + this_el.className.replace(/over/g, '').trim());
}
//
this.is_transitioning = true;
this.clearStack();
this.container.className = this.container.className.replace(/expanding/g, '').trim() + ' expanding';
if(this.container.hasAttribute('class') && this.container.className.indexOf('expanded') > -1) {
// hide the small button text
this.addToStack(function() {
var this_label;
for(var s = 0; s < this.button_sm_array.length; s++) {
this.button_sm_array[s].className = this.button_sm_array[s].className.replace(/over/g, '').trim();
this_label = this.button_sm_array[s].getElementsByClassName('label')[0];
this_label.className += 'hidden';
}
}.bind(this), 10);
// put em back together
this.addToStack(function() {
this.container.className = this.container.className.replace(/expanded/g, '');
}.bind(this), 260);
// fade in the large button text
this.addToStack(function() {
this.button_lg.className = this.button_lg.className.trim().replace(/hidden/g, ' fading in');
this.is_transitioning = false;
this.cleanUp();
}.bind(this), 530);
} else {
// shrink the small button text
this.addToStack(function() {
var this_label;
for(var s = 0; s < this.button_sm_array.length; s++) {
this_label = this.button_sm_array[s].getElementsByClassName('label')[0];
this_label.className = this_label.className + ' small';
}
}.bind(this), 10);
// fade out the large button text
this.button_lg.className = this.button_lg.className.replace(/fading in/g, '') + ' fading out';
// hide the large button
this.addToStack(function() {
this.button_lg.className = this.button_lg.className.trim() + ' hidden';
}.bind(this), 120);
// split em up
this.addToStack(function() {
this.container.className = this.container.className.trim() + ' expanded';
}.bind(this), 350);
// show the small button text
this.addToStack(function() {
var this_label;
for(var s = 0; s < this.button_sm_array.length; s++) {
this_label = this.button_sm_array[s].getElementsByClassName('label')[0];
this_label.className = this_label.className.replace(/hidden/g, '').replace(/small/g, '');
}
this.is_transitioning = false;
this.cleanUp();
}.bind(this), 570);
}
},
cleanUp: function() {
clearTimeout(this.tmo_cleanup);
this.tmo_cleanup = setTimeout(this.cleanClassNames_bound, 250);
},
cleanClassNames: function() {
// button container
this.container.className = this.container.className.replace(/expanding/g, '').trim();
// large button
this.button_lg.className = this.button_lg.className.replace(/fading/g, '').replace(/in/g, '').replace(/out/g, '').trim();
},
addToStack: function(p_func, p_time) {
this.tmo_array.push(setTimeout(p_func, p_time));
},
clearStack: function() {
for(var t = 0; t < this.tmo_array.length; t++) {
clearTimeout(this.tmo_array[t]);
};
this.tmo_array = [];
}
};
document.addEventListener('DOMContentLoaded', function(){
app.initSplitButton({
container:document.querySelector('#button-container'),
large_button:document.querySelector('#button-container #button-lg-1'),
small_buttons:document.querySelectorAll('#button-container .button.sm'),
width:160 // initial button width
});
document.querySelector('#button-container').style.display = 'block';
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.