Dynamic Drive CSS Library- CSS Dual Color Pill Buttons

CSS Library

Hosting Discounts

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

CSS Library: Links & Buttons: Here

CSS Dual Color Pill Buttons

Author: Dynamic Drive

These pill shaped buttons comprise of two complimentary colors using one or two pseudo elements that come together when the mouse rolls over it. We use CSS3's skew() property to give the transitioned "panel" a slanted edge for a sharp, sleek look. The buttons are perfect as Call to Action buttons with their attention grabbing visuals.

Demo:

From Left Edge

From Right Edge

Dynamic Drive Dynamic Drive Dynamic Drive

Dual Panels From Both Edges

Dynamic Drive Dynamic Drive Dynamic Drive

The CSS:

<link href='https://fonts.googleapis.com/css?family=Lato:400,900' rel='stylesheet' type='text/css'>

<style>

.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: #8E1911; /* left 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 panel beyond left edge of button */
  border-right: 1px solid #8E1911;
  transition: all .5s;
}

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

.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);
}


</style>

The HTML:

<p>From Left Edge</p>
<button class="dualcolorbutton"><span>Dynamic Drive</span></button> 
<button class="dualcolorbutton"><span>Dynamic Drive</span></button> 
<button class="dualcolorbutton"><span>Dynamic Drive</span></button>

<p>From Right Edge</p>
<a href="#" class="dualcolorbutton rightslide"><span>Dynamic Drive</span></a> 
<a href="#" class="dualcolorbutton rightslide"><span>Dynamic Drive</span></a> 
<a href="#" class="dualcolorbutton rightslide"><span>Dynamic Drive</span></a>

<p>Dual Panels From Both Edges</p>
<a href="#" class="dualcolorbutton dualslide"><span>Dynamic Drive</span></a> 
<a href="#" class="dualcolorbutton dualslide"><span>Dynamic Drive</span></a> 
<a href="#" class="dualcolorbutton dualslide"><span>Dynamic Drive</span></a>

Code Info

Rate this code:

Date Posted: 01/06/2017

Revision History: None

Usage Terms: Click here