.dualcolorbutton{
 	border: 1px solid navy;
  background: white; /* default button background color */
  display: inline-block; /* set to block or inline-block */
  padding: 10px 15px;
	margin: 10px; /* for demo layout */
  /*font: normal 16px 'Lato', sans-serif; use google custom font "Lato" */
  border-radius: 18px;
  cursor: pointer;
  position: relative;
	outline: none;
	text-decoration: none;
  color: black;
  overflow: hidden;
	/*overflow bug in Chrome fix: http://stackoverflow.com/questions/5736503/how-to-make-css3-rounded-corners-hide-overflow-in-chrome-opera */
	z-index: 100;
	transition: all .5s;
}

.dualcolorbutton > span{
  position: relative;
  display: block;
  z-index: 100;
}

.dualcolorbutton:before{
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  background: #02B43E; /* left slanted panel background color  => #8E1911 */
  top: 0;
  left: 0;
  -webkit-transform: skew(-10deg) translate3d(-103%,0,0);
  transform: skew(-10deg) translate3d(-103%,0,0); /* tuck away slanted panel beyond left edge of button */
 /* border-right: 1px solid #8E1911; */
  transition: all .5s;
}

.dualcolorbutton:hover{
	color: white;
	background: #9EE1B4; /* button background color onhover => #BC3A31 */
}

.dualcolorbutton:hover:before{
  -webkit-transform: skew(-10deg) translate3d(-50%,0,0);
  transform: skew(-10deg) translate3d(-50%,0,0); /* move slanted panel to middle of panel */
}

/* "RightSlide Varation */

.dualcolorbutton.rightslide:before{
  -webkit-transform: skew(-10deg) translate3d(103%,0,0); /* tuck away slanted panel beyond right edge of button */
  transform: skew(-10deg) translate3d(103%,0,0); /* tuck away slanted panel beyond right edge of button */
}

.dualcolorbutton.rightslide:hover:before{
  -webkit-transform: skew(-10deg) translate3d(50%,0,0);
  transform: skew(-10deg) translate3d(50%,0,0);
}

/* "Dual Panels Varation */

.dualcolorbutton.dualslide{
	background: white;
}

.dualcolorbutton.dualslide:after{
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  background: #BC3A31; /* right slanted panel background color */
  top: 0;
  left: 0;
  -webkit-transform: skew(-10deg) translate3d(-103%,0,0);
  transform: skew(-10deg) translate3d(103%,0,0); /* tuck away slanted right panel beyond right edge of button */
  border-right: 1px solid #8E1911;
  transition: all .5s;
}

.dualcolorbutton.dualslide:hover:after{
  -webkit-transform: skew(-10deg) translate3d(50%,0,0);
  transform: skew(-10deg) translate3d(50%,0,0);
}