Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library

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:

The HTML:

Code Info

Rate this code:

Date Posted: 01/06/2017

Revision History: None

Usage Terms: Click here

Your Comments
Copyright 2006-2016 Dynamic Drive