Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library

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.


The CSS:


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

Copyright 2006-2016 Dynamic Drive