【CSS】CSS3ボタンアニメーションコレクションButton.css

CSS

button.css

March 7, 2017

Button.cssはCSS3およびHTML5ボタンのアニメーションコレクション。

Features Included

  1. 2-D Flip Buttons
  2. 3-D Flip Buttons
  3. Slide-In Buttons
  4. Switch Buttons
  5. Water Fill Effects

Flip

	<!-- 2-D Flip -->
	<section class="button-wrapper flip" id="section3">
	  	<section class="section-container">
	    	<h4>Flip</h4>
	    
		    <!-- Horizontal Flip -->
		    <div class="button-container button-flip-horizontal">
		        <div class="flipper flipper-flip-horizontal">
		            <div class="button front">
		              	<i class="fa fa-twitter"></i>
		            </div>
		            <div class="button back">
		              	Twitter
		            </div>
		        </div>
		    </div>
	    
			<!-- Vertical Flip -->
		    <div class="button-container button-flip-vertical">
		        <div class="flipper flipper-flip-vertical">
		            <div class="button front">
		              	<i class="fa fa-facebook"></i>
		            </div>
		            <div class="button back">
		              	Facebook
		            </div>
		        </div>
		    </div>
		    
			<!-- Oblique Flip -->
		    <div class="button-container button-flip-oblique">
		        <div class="flipper flipper-flip-oblique">
		            <div class="button front">
		              	<i class="fa fa-instagram"></i>
		            </div>
		            <div class="button back">
		              	Instagram
		            </div>
		        </div>
		    </div>
		    
	  </section>
	</section>

MIT

Latest Posts

Related Posts