Dynamic Drive CSS Library- CSS Button Style: Draped Background Effect

CSS Library

Hosting Discounts

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

CSS Library: Links & Buttons: Here

CSS Button Style: Draped Background Effect

Author: Dynamic Drive | Code completely rewritten Nov 23rd, 17

These CSS buttons are endowed with a solid background that "drapes" into view when the mouse rolls over them, creating a sleek, polished look. The "drape" is rendered using a :after pseudo element with rounded corners that glide into view thanks to CSS3 transitions.

This button style can be applied to BUTTON or A elements to style either depending on your needs.

Demo:

The CSS:

<style>

.drapeeffect{
  color: black; /* button text color */
  outline: none;
  background: transparent;
  border-width: 0;
  padding: 8px 10px; 
  font-weight: bold;
  font-size: 18px; /* font size */
  text-transform: uppercase;
  line-height: 2;
  position: relative;
	display: inline-block;
  margin-right: 20px;
  cursor: pointer;
	text-decoration: none; /* remove underline if using A instead of BUTTON tag */
  overflow: hidden;
}

.drapeeffect:before, .drapeeffect:after{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 0 0 30% 30%/50%;
  background: #37d921; /* onhover background color */
  left: 0;
  top: -100%;
  z-index: -1;
  transition: all .5s;
}

.drapeeffect:before{
  background: #eee; /* button default background color */
  z-index: -2;
  top: 0;
  border-radius: 0;
}

.drapeeffect:hover:after{
  top: 0;
  border-radius: 0;
  transition: top .5s, border-radius .5s .3s;
}

/* //// Drape from Center effect //// */

.drapecenter:after{
  border-radius: 50%;
}

/* //// Drape from Left effect //// */

.drapeleft:after{
  top: 0;
  left: -100%;
  border-radius: 0 20% 20% 0/80%;
}

.drapeleft:hover:after{
  left: 0;
  transition: left .5s, border-radius .1s .5s;
}

/* //// Drape from Right effect //// */

.draperight:after{
  top: 0;
  left: 100%;
  border-radius: 20% 0 0 20%/80%;
}

.draperight:hover:after{
  left: 0;
  transition: left .5s, border-radius .1s .5s;
}

</style>

The HTML:

<button class="drapeeffect">Subscribe</button>
<button class="drapeeffect drapecenter">Subscribe</button>
<button class="drapeeffect drapeleft">Subscribe</button>
<button class="drapeeffect draperight">Subscribe</button>

Code Info

Rate this code:

Date Posted: 02/24/2016

Revision History: Nov 23rd, 17 Rewritten to allow a default background color and solid on-hover background color

Usage Terms: Click here