A collection of CSS3 button animations. Designed to demonstrate the uses of CSS3 animations, Button.css is intended to provide a lightweight and refreshing user experience. Flip, 3-D Flip, Slide, Switch and Water Fill

Try out and illustrate some of the subtle button effects you can create just using box-shadow and borders on pseudo–elements. Tested in latest Chrome and Firefox, but no reason it shouldn't work in all latest browsers.

3D push buttons with a retro style and font. The first button is a push button that pushes to the center and tilts left or right based on the cursor's location while hovering. It is styled similar to an old-school game console button. These buttons have been configured with a sm, md, lg size classes along with bootstrap-esque classes such as primary, secondary, danger, warning, success and info. Second button is a loader button with it's own progress bar when pushed. It only pushes in the center, but then opens upwards to show a progress bar on it's front side. It will either show a checkmark or X when finished based on success of action.

CSS3 button w/ 3d transform using no JS, no imgs, and No icon-fonts

3D pushable buttons with a real perspective and a parallax-like effect when scrolling. Made with CSS 3D transforms.

Prototype for 3D flip button.

Animated social icons on hover with 3d effects using font awesome.

CSS buttons styled to look like shirt buttons with a plaid flannel CSS background. There are not actually holes in the buttons. That is an illusion by placing different colored circles appropriately. Those are all done as a box-shadow from one transparent circle created from .button::after. The body tag is utilized to create the plaid design with repeating-linear-gradient. body::before creates the horizontal lines and body::after creates the vertical lines. Developed using css and html. demo and download available.

jQuery + 3D css button.Button created for the gamers league project v2 version. 3D button developed using CSS, HTML and jQuery. Demo and download available.

In this tutorial i will show how to create CSS 3D Button Effects with animation. Here i'll use HTML and CSS to make perfect 3D button effects animation.

Creating CSS buttons with flat colors & 3D push effects using only css3 and HTML. Demo and Download available.