Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library

Advertise Here

CSS Layouts
Web Graphics
Online Tools:

CSS Library: Horizontal CSS Menus: Links & Buttons: 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: 11/11/2014

Revision History: None

Usage Terms: Click here

Your Comments (0)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.


Copyright 2006-2014 Dynamic Drive Read our Usage Terms before using any of the CSS codes.