Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library

CSS Library: Horizontal CSS Menus: Links & Buttons: CSS3 demos: Here

Depressible Circle Buttons

Author: Dynamic Drive

These large, circular buttons employ CSS3 shadows to create a 3D, depressible effect, with hovering over a button causing it to depress. Four different button colors are presented to give you a jump start in inspiration for using these bold menu buttons. Go big -and round- or go home!

Sign Up! It's free and fast Sign Up! It's free and fast Sign Up! It's free and fast Sign Up! It's free and fast

Multiple lines of text are supported inside each button, which are all centered vertically by using this nifty CSS3 transform technique of setting a relatively positioned element to top: 50% in conjunction with translating it -50% vertically:

.vcentercontainer{
 position: relative;
 top: 50%;
 transform: translateY(-50%);
}

The CSS:

The HTML:

Code Info

Rate this code:

Date Posted: 02/04/2015

Revision History: None

Usage Terms: Click here

Your Comments
Copyright 2006-2016 Dynamic Drive