Hand-picked HTML and CSS code examples, tutorials and articles
CSS Gallery, jQuery plugins

button flip animation css

CSS Button Flip Animation

This tutorial will help user to bring flip animation effect for button click. CSS animations are a lot of fun. This tutorial will covers vertical, horizontal and folding button flip animation using css3.

Common CSS for all button flip animation

.buttonHolder{
	width: 100px;
	height: 40px;
	position: relative;
	margin: 0 auto 40px;
	-webkit-perspective: 800px;
	-moz-perspective: 800px;
	-o-perspective: 800px;
	perspective: 800px;
}

Vertical Button Flip Animation

HTML

<div class="buttonHolder">
    <div class="vButtonFlipper">
        <!-- Standard button -->
	<a type="button" class="btn btn-default button1">Default</a>
	<!-- Indicates a successful or positive action -->
	<a type="button" class="btn btn-success button2">Success</a>
    </div>
</div>

CSS

.vButtonFlipper {
	-webkit-transition: -webkit-transform 1s;
	-moz-transition: -moz-transform 1s;
	-o-transition: -o-transform 1s;
	transition: transform 1s;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
	height: 100%;
}
.vButtonFlipper.flipped {
	position: absolute;
	   width: 100%;
  -webkit-transform: rotateX( -180deg );
     -moz-transform: rotateX( -180deg );
       -o-transform: rotateX( -180deg );
          transform: rotateX( -180deg );
}
.vButtonFlipper a {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
	width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -o-transition: -o-transform 1s;
    transition: transform 1s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.vButtonFlipper .button2 {
  -webkit-transform: rotateX( 180deg );
     -moz-transform: rotateX( 180deg );
       -o-transform: rotateX( 180deg );
          transform: rotateX( 180deg );
}

JavaScript

$( document ).ready(function() {
	$( ".vButtonFlipper" ).click(function() {
	  $( this ).toggleClass( "flipped" );
	});
});

Horizontal Button Flip Animation

HTML

<div class="buttonHolder">
    <div class="hButtonFlipper">
        <!-- Standard button -->
	<a type="button" class="btn btn-default button1">Default</a>
	<!-- Indicates a successful or positive action -->
	<a type="button" class="btn btn-success button2">Success</a>
    </div>
</div>

CSS

.hButtonFlipper {
	-webkit-transition: -webkit-transform 1s;
	-moz-transition: -moz-transform 1s;
	-o-transition: -o-transform 1s;
	transition: transform 1s;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
	height: 100%;
}
.hButtonFlipper.flipped {
	position: absolute;
	   width: 100%;
  -webkit-transform: rotateY( 180deg );
     -moz-transform: rotateY( 180deg );
       -o-transform: rotateY( 180deg );
          transform: rotateY( 180deg );
}
.hButtonFlipper a {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
	width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -o-transition: -o-transform 1s;
    transition: transform 1s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.hButtonFlipper .button2 {
  -webkit-transform: rotateY( 180deg );
     -moz-transform: rotateY( 180deg );
       -o-transform: rotateY( 180deg );
          transform: rotateY( 180deg );
}

JavaScript

$( document ).ready(function() {
	$( ".hButtonFlipper" ).click(function() {
	  $( this ).toggleClass( "flipped" );
	});
});

Vertical Button Folding Animation

HTML

<div class="buttonHolder">
    <div class="foldingButton">
        <!-- Standard button -->
	<a type="button" class="btn btn-default button1">Default</a>
	<!-- Indicates a successful or positive action -->
	<a type="button" class="btn btn-success button2">Success</a>
    </div>
</div>

CSS

.foldingButton {
	-webkit-transition: -webkit-transform 1s;
	-moz-transition: -moz-transform 1s;
	-o-transition: -o-transform 1s;
	transition: transform 1s;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
	height: 100%;
}
.foldingButton.fold {
	position: absolute;
	   width: 100%;
  -webkit-transform: rotateX( 90deg );
     -moz-transform: rotateX( 90deg );
       -o-transform: rotateX( 90deg );
          transform: rotateX( 90deg );
}
.foldingButton a {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
	width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -o-transition: -o-transform 1s;
    transition: transform 1s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.foldingButton .button2 {
  -webkit-transform: rotateX( -90deg );
     -moz-transform: rotateX( -90deg );
       -o-transform: rotateX( -90deg );
          transform: rotateX( -90deg );
}

JavaScript

$( document ).ready(function() {
	$( ".foldingButton" ).click(function() {
	  $( this ).toggleClass( "fold" );
	});
});
Download Demo

Advertisement