cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">	
<body>
	
	<!-- Navbar -->
	<nav class="navbar-container">
		<ul class="nav navbar">
			<li class="nav-item active"><a href="#intro">INTRO</a></li>
			<li class="nav-item"><a href="#flip">FLIP</a></li>
			<li class="nav-item"><a href="#flip-3d">3D-FLIP</a></li>
			<li class="nav-item"><a href="#slide">SLIDE</a></li>
			<li class="nav-item"><a href="#switch">SWITCH</a></li>
			<li class="nav-item"><a href="#water-fill">WATER FILL</a></li>
		</ul>
	</nav>

	<!-- Intro Page -->
	<section class="page-container" id="intro">
	  	<section class="section-container">
			<h2>Button.css</h2>
			<p class="intro-des">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. You can download the source code on <a href="https://github.com/kevinfan23/button.css">Github</a></p>
			<br>
			<p class="intro-des"><span>Button.css is released under the MIT license</span></p>
	  	</section>
	</section>
	
	<!-- 2-D Flip -->
	<section class="page-container" id="flip">
	  	<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>
	
	
	<!-- 3-D Flip -->
	<section class="page-container" id="flip-3d">
	  	<section class="section-container">
		    <h4>3-D Flip</h4>
		    
		    <!-- 3-D Flip Downward-->
			<div class="button-container button-flip3d-vertical1">
		        <div class="flipper flipper-flip3d-vertical1">
		            <div class="button front">
		              	<i class="fa fa-codepen"></i>
		            </div>
		            <div class="button button-3d back">
		              	codepen
		            </div>
		        </div>
	    	</div>
	    	
		    <!-- 3-D Flip Upward-->
			<div class="button-container button-flip3d-vertical2">
		        <div class="flipper flipper-flip3d-vertical2">
		            <div class="button front">
		              	<i class="fa fa-github"></i>
		            </div>
		            <div class="button button-3d back">
		              	Github
		            </div>
		        </div>
	    	</div>
	    	
	  </section>
	</section>
	
	
	<!-- Slide -->
	<section class="page-container" id="slide">
	  	<section class="section-container">
		    <h4>Slide</h4>
		    
		    <!-- Horizontal Slide -->
			<div class="button-container button-slide-horizontal">
		        <div class="slider slider-horizontal">
		            <div class="button">
		              	<i class="fa fa-dribbble"></i>
		            </div>
		        </div>
	    	</div>
	    
		    <!-- Vertical Slide -->
			<div class="button-container button-slide-vertical">
		        <div class="slider-vertical">
		            <div class="button">
		              	<i class="fa fa-medium front"></i>
		              	<i class="back">Medium</i>
		            </div>
		        </div>
	    	</div>
	    	
	  </section>
	</section>
	
	<!-- Switch -->
	<section class="page-container" id="switch">
	  <section class="section-container">
	    <h4>Switch</h4>
	    
		<!-- Toogle Slide Switch -->
		
	    <div class="switch-container switch-toggle-slide">
		    <span class="active"></span>
		    <div class="switch-slide active-switch" id="slide-on">
			    ON
		    </div>
		    <div class="switch-slide" id="slide-off">
			    OFF
		    </div>
		</div>
		
		<br>

		<!-- Slim Switches -->
	    <div class="switch-container switch-slim">
			<input type="checkbox" name="slim" class="slim" id="slim-blue"/>
			<label for="slim-blue"></label>
		</div>
		
	    <div class="switch-container switch-slim">
			<input type="checkbox" checked name="slim" class="slim" id="slim-red"/>
			<label for="slim-red"></label>
		</div>
		
		<div class="switch-container switch-slim">
			<input type="checkbox" name="slim" class="slim" id="slim-green"/>
			<label for="slim-green"></label>
		</div>
		
		<div class="switch-container switch-slim">
			<input type="checkbox" checked name="slim" class="slim" id="slim-black"/>
			<label for="slim-black"></label>
		</div>
		
		
		<br>
		
		<div class="button-row-container">
			<!-- iOS Switch -->
			
		    <div class="switch-container switch-ios">
				<input type="checkbox" name="ios" id="ios"/>
				<label for="ios"></label>
			</div>
			
			<!-- Skewed Switch -->
			
		    <div class="switch-container switch-skewed">
			    <div class="skewed-container">
					<div class="skewed skewed-off">OFF</div>
					<div class="skewed skewed-on">ON</div>
			    </div>
			</div>
			
			<!-- Flat Switch -->
		
		    <div class="switch-container switch-flat">
			    <div class="flat-container">
				    <div class="flat flat-off">&#10005;</div>
					<div class="flat flat-on">&#9634;</div>
			    </div>
			</div>
		
		</div>
		
	  </section>
	</section>
	
	<!-- Water Fill -->
	<section class="page-container" id="water-fill">
	  <section class="section-container">
	    <h4>Water Fill</h4>
	    <p class="reference">*Inspired by <a href="http://codepen.io/Bergability/" target="_blank">Scott Berg</a></p>
	    
		<div class="button-container button-water-fill wave-blue">
	        <div class="filler">
	            <div class="button">
	              	<i>Blue</i>
	            </div>
	        </div>
    	</div>
    	
		<div class="button-container button-water-fill wave-red">
	        <div class="filler">
	            <div class="button">
	              	<i>Red</i>
	            </div>
	        </div>
    	</div>
    	
		<div class="button-container button-water-fill wave-yellow">
	        <div class="filler">
	            <div class="button">
	              	<i>Yellow</i>
	            </div>
	        </div>
    	</div>
    	
		<div class="button-container button-water-fill wave-white">
	        <div class="filler">
	            <div class="button">
	              	<i>White</i>
	            </div>
	        </div>
    	</div>
    	
		<div class="button-container button-water-fill wave-black">
	        <div class="filler">
	            <div class="button">
	              	<i>Black</i>
	            </div>
	        </div>
    	</div>
	    	
	  </section>
	</section>
            
          
!
            
              /*** Import Fonts ***/
@import url(https://fonts.googleapis.com/css?family=Lato:400,300);

/*** Variables ***/
$Lato:	'Lato', sans-serif;
$Open-sans:	'Open Sans', sans-serif;
$dark-gray: #3c3c3c;
$light-gray: #a6a6a6;
$UIblue: #3CBBF7;
$UIred: #E74C3C;
$UIyellow: #F8E71C;
$UIgreen: #13bf11;
$dark-brown: #542900;

/* -------------------------------- 
Small Window Size and Mobile Style
-------------------------------- */

@media screen and (max-width: 875px) {
  .button-container {
    margin: 10px 10px !important;
  }
  
  h2 {
	  font-size: 15vw !important;
  }
}

@media screen and (max-width: 550px) {
	
	.nav, .navbar {
		width: 90% !important;
		
		.nav-item {
			font-size: 10px !important;
		}
	}
}

@media screen and (max-width: 350px) {
	
	.navbar-container {
		height: 120px !important;

	}
	.nav, .navbar {
		flex-wrap: wrap !important;
		
		.nav-item {
			margin: 5px 5px !important;
		}
	}
}

/* -------------------------------- 
		General Style
-------------------------------- */

html, body {
	font-family: $Lato;
	font-weight: 300;
}

h2 {
	font-size: 100px;
	position: relative;
	color: #5b85c0;
	background-image: -webkit-linear-gradient(90deg, #a558d4 0%, #34619e 80%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-animation: hue 60s infinite linear;
}

p.intro-des {
	position: relative;
	font-size: 20px;
	line-height: 35px;
	margin-top: 50px;
	
	a {
		color: $dark-gray;
	}
	
	span {
		font-size: 15px;
	}
}

.button-row-container {
	width: 250px;
	height: 50px;
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
}

/*** Navbar ***/

.navbar-container {
	position: fixed;
	top: 0;
	left: 50%;
	margin-right: 50%;
	transform: translateX(-50%);
	z-index: 10;
	width: 100%;
	height: 70px;
	background: linear-gradient(to bottom, rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%); 
}

.nav, .navbar {
	width: 500px;
	margin: auto;
	margin-top: 20px;
	font-family: $Lato;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 2px;
	list-style: none;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	flex-wrap: nowrap;

	a {
		color: $dark-gray;
		text-decoration: none;
	}
	
	.nav-item {
		padding: 5px 0;
		
		&:after {
			content: '\00a0';
			display: block;
			height: 1px;
			width: 100%;
			position: relative;
			top: 3px;
			background: transparent;
			transition: top .3s ease-out;
			-webkit-transition: top .3s ease-out;
		}
		
		&:hover:after {
			top: 7px;
			background: #3c3c3c;
		}
	}
}

.active {
	&:after {
		height: 2px !important;
		background: #e74c3c !important;
	}
}


section.page-container {
	margin: auto;
	width: 90%;
	max-width: 800px;
	height: 100vh;
	position: relative;
	text-align: center;
}

#intro {
	max-width: 800px;
	
	.section-container {
		margin-top: 70px;
	}
}

.section-container {
  position: absolute;
  top: 45%;
  left: 50%;
  width: 90%;
  transform: translate(-50%, -50%);
  text-align: center;
  
  h4 {
    font-size: 50px;
    font-weight: 300;
    color: #3c3c3c;
    margin-bottom: 30px;
  }
}

/*** General Button Styles ***/

.button-container {
  display: inline-block;
  margin: 10px 10px;
  cursor: pointer;
  font-weight: 400;
  letter-spacing: 2px;
  height: 45px;
  width: 200px;
  -webkit-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000; 
   
  .flipper {
    transition: all .5s ease-in-out;
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    
    position: relative;
  }
  
  .button {
    height: 45px;
    width: 200px;
    border-radius: 3px;
    backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    -webkit-box-shadow: 1px 2px 4px -1px rgba(60,60,60,0.64);
    box-shadow: 1px 2px 4px -1px rgba(60,60,60,0.64);
    
    i.fa {
      color: white;
      font-size: 20px;
      margin: auto;
      text-shadow: .5px 1px 2px #3c3c3c;
    }
    
    &.front {
      z-index: 10;
    }

    &.back {
      color: white;
      font-size: 15px;
      text-transform: uppercase;
    }
  }
}

/* -------------------------------- 
			Flip
-------------------------------- */

/*** Horizontal Flip ***/

.button-flip-horizontal {
	
	.front {
		background-image: -webkit-linear-gradient(90deg, #53a0fd, #01c2f3);		
		background-image: linear-gradient(90deg, #53a0fd, #01c2f3);
	}
	
	.back {
		background-image: -webkit-linear-gradient(90deg, #01c2f3, #53a0fd);
		background-image: linear-gradient(90deg, #01c2f3, #53a0fd);
		transform: rotateY(-180deg);
	}
	
	&:hover .flipper-flip-horizontal {
		transform: rotateY(180deg);
	}
}

/*** Vertical Flip ***/

.button-flip-vertical {
	
	.flipper-flip-vertical {
    	transform-origin: 100% 22.5px;
	}
	
	.front {
    	background-image:  linear-gradient(90deg, #20438e, #3b5998);
  	}
  
  	.back {
  		transform: rotateX(180deg);
  		background-image:  linear-gradient(90deg, #3b5998, #20438e);
  	}
  	
  	&:hover .flipper-flip-vertical {
		transform: rotateX(-180deg);
	}
}

/*** Oblique Flip ***/

.button-flip-oblique {

	.front {
    	background-image: linear-gradient(90deg, #125688, #ded1c1);
  	}
  
  	.back {
		transform: rotateY(-180deg);
   		background-image: linear-gradient(90deg, #ded1c1, #125688);
  	}
  	
  	&:hover .flipper-flip-oblique {
  		transform: rotate3d(1, 10, 0, 180deg);
	}
}


/* -------------------------------- 
			3D-Flip
-------------------------------- */

.button-flip3d-vertical1 {
	  
  	.flipper-flip3d-vertical1 {
    	transform-origin: 100% 22.5px;
  	}
  
  	.front {
    	transform: translateZ(22.5px);
		background-image:  linear-gradient(90deg, #000, #3c3c3c);
  	}
  
  	.back {
	  	-webkit-transform: rotateX(90deg) translateZ(22.5px);
	  	-ms-transform: rotateX(90deg) translateZ(22.5px); 
    	transform: rotateX(90deg) translateZ(22.5px);
		background-image:  linear-gradient(90deg, #000, #3c3c3c);
  	}
  	
  	&:hover .flipper-flip3d-vertical1 {
  		transform: rotateX(-90deg);
	}
}

.button-flip3d-vertical2 {
	  
  	.flipper-flip3d-vertical2 {
    	transform-origin: 100% 22.5px;
  	}
  
  	.front {
    	transform: translateZ(22.5px);
		background-image:  linear-gradient(90deg, #000, #3c3c3c);
  	}
  
  	.back {
	  	-webkit-transform: rotateX(90deg) rotateZ(180deg) rotateY(180deg) translateZ(22.5px);
	  	-ms-transform: rotateX(90deg) rotateZ(180deg) rotateY(180deg) translateZ(22.5px); 
    	transform: rotateX(90deg) rotateZ(180deg) rotateY(180deg) translateZ(22.5px);
		background-image:  linear-gradient(90deg, #000, #3c3c3c);
  	}
  	
  	&:hover .flipper-flip3d-vertical2 {
  		transform: rotateX(90deg);
	}
}

/* -------------------------------- 
			Slide
-------------------------------- */

.slider {
	
	i {
		transition: all .3s ease-in-out;
	
		&:before {
			transition: all .3s ease-in-out;
		}
		
		&:after {
			font-family: $Lato;
			color: white;
			font-size: 15px;
			text-transform: uppercase;
			letter-spacing: 2px;
			text-shadow: none;
			content: 'Dribbble';
			position: absolute;
			opacity: 0;
			top: 2.5px;
			transition: all .3s ease-in-out;
		}
	}
}

/*** Horizontal Slide ***/

.button-slide-horizontal {
	
	.button {
		background-image:  linear-gradient(90deg, #ea4c89, #ee9b83);
	}
	
	i {
		position: relative;
		display: inline-block;			
		transition: all .3s ease-in-out;

		&:before {
			transition: all .3s ease-in-out;
		}
	}
	
	&:hover i {
		padding-right: 100px;
	}
	
	&:hover i:before {
		opacity: 0;
	}
	&:hover i:after {
		opacity: 1;
	}	
}

/*** Vertical Slide ***/

.button-slide-vertical {
	overflow: hidden;
	height: 45px;
	
	.button {
		background-image:  linear-gradient(90deg, #1c84a6, #3CB371);
		overflow: hidden;
		height: 45px;
	}
	
	i {
		position: relative;
		margin: 0 !important;
		top: 10px;
		transition: all .3s ease-in-out;
		opacity: 1;			
	}
	
	i.back {
		font-family: $Lato;
		color: white;
		font-size: 15px;
		text-transform: uppercase;
		letter-spacing: 2px;
		transform: translateY(30px);
		opacity: 0;
	}
	
	&:hover i.front {
		transform: translateY(-30px);
		opacity: 0;			
	}
	
	&:hover i.back {
		transform: translateY(-20px);
		opacity: 1;			
	}
}

/* -------------------------------- 
			Switch
-------------------------------- */
.switch-container {
	display: inline-block;
	margin: 10px 10px;
}


/*** Toggle Slide Style ***/

.switch-toggle-slide {
	width: 250px;
	height: 20px;
	border: 1px solid rgba(218, 220, 222, 0.7);
	border-radius: 3px;
	will-change: transform;
	background: rgba(74, 82, 85, 0.8);
	position: relative;
		
	span.active {
		display: block;
		position: absolute;
		left: 0;
		width: 125px;
		height: 20px;	
		background: rgba(218, 220, 222, 0.7);
		z-index: -1;
		-moz-transition: .2s ease-in-out;
		-webkit-transition:	.2s ease-in-out;
		transition: .2s ease-in-out;
	}
	
	.switch-slide {
		width: 125px;
		height: 20px;
		display: inline-block;
		float: left;
		vertical-align: middle;
		text-align: center;
		font-size: 13px;
		line-height: 20px;
		font-weight: 400;
		letter-spacing: 1px;
		background: transparent;
		color: white;
		-moz-transition: .2s ease-in-out;
		-webkit-transition:	.2s ease-in-out;
		transition: .2s ease-in-out;
		
		&#slide-on {
			border-top-left-radius: 2px;
			border-bottom-left-radius: 2px;
		}
		
		&#slide-off {
			border-top-right-radius: 2px;
			border-bottom-right-radius: 2px;
		}
		
		&.active-switch {
			color: $dark-gray;
		}
	}
}

/*** Slim Switch Style ***/

input.slim {
	max-height: 0;
	max-width: 0;
	opacity: 0;
	  
	& + label {
		display: block;
		position: relative;
		text-indent: -5000px;
		height: 10px;
		width: 40px;
		border-radius: 15px;
  	}
  	
  	& + label:before {
		content: "";
		position: absolute;
		display: block;
		height: 10px;
		width: 10px;
		top: 0;
		left: 0;
		border-radius: 15px;
		background: transparent;
		-moz-transition: .2s ease-in-out;
		-webkit-transition:	.2s ease-in-out;
		transition: .2s ease-in-out;
	}
	
	& + label:after {
		content: "";
		position: absolute;
		display: block;
		height: 20px;
		width: 20px;
		top: -5px;
		left: 0px;
		border-radius: 15px;
		background: white;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
		-moz-transition: .2s ease-in-out;
		-webkit-transition:	.2s ease-in-out;
		transition: .2s ease-in-out;
	}
	
	&:checked + label:before {
		width: 40px;
	}
  	
  	&:checked + label:after {
	  	left: 20px;
	  	box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
	}
}

input#slim-blue {
	
	& + label {
		background: rgba(60, 187, 247, 0.7);
	}
	
	& + label:after {
		background: $UIblue;
	}
	
	&:checked + label:before {
		background: rgba(60, 187, 247, 0.7);
	}
}

input#slim-red {
	
	& + label {
		background: rgba(231, 76, 60, 0.7);
	}
	
	& + label:after {
		background: $UIred;
	}
	
	&:checked + label:before {
		background: rgba(231, 76, 60, 0.7);
	}
}

input#slim-green {
	
	& + label {
		background: rgba(19, 191, 17, 0.7);
	}
	
	& + label:after {
		background: $UIgreen;
	}
	
	&:checked + label:before {
		background: rgba(19, 191, 17, 0.7);
	}
}

input#slim-black {
	
	& + label {
		background: rgba(0, 0, 0, 0.7);
	}
	
	& + label:after {
		background: black;
	}
	
	&:checked + label:before {
		background: rgba(0, 0, 0, 0.7);
	}
}

/*** iOS Style ***/

input#ios {
	max-height: 0;
	max-width: 0;
	opacity: 0;
  
	& + label {
		display: block;
		position: relative;
		box-shadow: inset 0 0 0px 1px $light-gray;
		text-indent: -5000px;
		height: 30px;
		width: 50px;
		border-radius: 15px;
  	}
  	
  	& + label:before {
		content: "";
		position: absolute;
		display: block;
		height: 30px;
		width: 30px;
		top: 0;
		left: 0;
		border-radius: 15px;
		background: transparent;
		-moz-transition: .2s ease-in-out;
		-webkit-transition:	.2s ease-in-out;
		transition: .2s ease-in-out;
	}
	
	& + label:after {
		content: "";
		position: absolute;
		display: block;
		height: 30px;
		width: 30px;
		top: 0;
		left: 0px;
		border-radius: 15px;
		background: white;
		box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, .2), 0 2px 4px rgba(0, 0, 0, .2);
		-moz-transition: .2s ease-in-out;
		-webkit-transition:	.2s ease-in-out;
		transition: .2s ease-in-out;
	}
	
	&:checked + label:before {
		width: 50px;
		background: $UIgreen;
	}
  	
  	&:checked + label:after {
	  	left: 20px;
	  	box-shadow: inset 0 0 0 1px $UIgreen, 0 2px 4px rgba(0, 0, 0, .2);
	}
}

/*** Skewed Switch Style ***/

.switch-skewed {
	position: relative;
	height: 30px;
	width: 50px;
	margin-top: 29px;
	background: $light-gray;
	transform: skew(-15deg, 0);
	overflow: hidden;
	-moz-transition: .2s ease-in-out;
	-webkit-transition:	.2s ease-in-out;
	transition: .2s ease-in-out;
	
	.skewed-container {
		width: 100px;
		height: 30px;
		transform: skew(15deg, 0);
		vertical-align: middle;
		text-align: center;
		font-size: 13px;
		line-height: 30px;
		font-weight: 400;
		letter-spacing: 1px;
		-moz-transition: .2s ease-in-out;
		-webkit-transition:	.2s ease-in-out;
		transition: .2s ease-in-out;

	}
	.skewed {
		float: left;
		height: 30px;
		width: 50px;	
		display: inline-block;
		color: white;
	}
	
	&:hover {
		background: $UIgreen;
	}
	
	&:hover .skewed-container {
		transform: translateX(-50px) skew(15deg, 0);
	}
}

/*** Flat Switch Style ***/

.switch-flat {
	height: 35px;
	width: 35px;
	margin-top: 30px;
	background-image: -webkiet-linear-gradient(#ece9e9 10%, #ffffff 100%);
	background-image: linear-gradient(#ece9e9 10%, #ffffff 100%);	
	-webkit-box-shadow: inset 0px 1px 1px #aeaaaa;
	box-shadow: inset 0px 1px 1px #aeaaaa;
	border-radius: 50%;
	overflow: hidden;
	
	.flat-container {
		height: 70px;
		width: 35px;
		color: $light-gray;
		vertical-align: middle;
		text-align: center;
		font-size: 18px;
		line-height: 35px;
		font-weight: 400;
		-moz-transition: .2s ease-in-out;
		-webkit-transition:	.2s ease-in-out;
		transition: .2s ease-in-out;
		border-radius: 50%;
	}
	
	.flat {
		height: 35px;
		width: 35px;
		border-radius: 50%;
		z-index: -1;
		
		&.flat-off {
			background: transparent;	
		}
		
		&.flat-on {
			color: white;
			font-size: 15px;
		}
	}
	
	&:hover {
		background: rgba(19, 191, 17, 0.7);
		-webkit-box-shadow: inset 0px 1px 1px $UIgreen;
		box-shadow: inset 0px 1px 1px $UIgreen;
	}
	
	&:hover .flat-container {
		transform: translateY(-35px);
	}
}


/* -------------------------------- 
			Water Fill
-------------------------------- */

/*** Water Fill ***/

p.reference {
	margin-top: -20px;
	margin-bottom: 10px;
	font-size: 12px;
	
	a {
		color: $dark-gray;
	}
}

.button-water-fill {
	.button {
		background-position: 0 -50%;
		background-repeat: repeat-x;
	    transition: background-position .75s ease;

   		&:hover {
			background-position: 100% 60%;
			color: white !important;
		}
	}
	
	&.wave-blue .button {
		color: $UIblue;
		background-image: url('http://s32.postimg.org/k0nwdbgol/wave_blue.png');	
	}
	
	&.wave-red .button {
		color: $UIred;
		background-image: url('http://s32.postimg.org/5798sk8xh/wave_red.png');	
	}
	
	&.wave-yellow .button {
		color: $UIyellow;
		background-image: url('http://s32.postimg.org/ku0i5xmph/wave_yellow.png');	
	}
	
	&.wave-white .button {
		background-color: black;
		color: white;
		background-image: url('http://s32.postimg.org/6c3axxved/wave_white.png');	
		
		&:hover {
			color: black !important;
		}
	}
	
	&.wave-black .button {
		color: black;
		background-image: url('http://s32.postimg.org/g5kiaqxit/wave_black.png');	
	}
}
            
          
!
            
              $(document).ready(function() {
	
	smoothScroll();
	
	// Animate menu using animate.css
	$('.navbar').addClass('animated bounceInDown');

	// Scroll event listen
	$(window).on('scroll', function(){
		updateNavigation();
	});
	
	$('.button-container, .switch-container').bind('touchstart mousedown', function(e){
	});
	
	// Update nav selected when click
	$('a').on('click', function() {
		console.log("haha");
		$('.nav-item').removeClass('active');
		$(this).parent().addClass('active');
	});
	
	slideSwitch();
	
});

// Smooth the scroll action
function smoothScroll() {
	
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 500);
        return false;
      }
    }
  });
}

// Update nav selected
function updateNavigation() {
	var lastId,
    topMenu = $(".navbar"),
    topMenuHeight = topMenu.outerHeight()+15,
    // All list items
    menuItems = topMenu.find("a"),
    // Anchors corresponding to menu items
    scrollItems = menuItems.map(function(){
      var item = $($(this).attr("href"));
      if (item.length) { return item; }
    });
    
   // Get container scroll position
   var fromTop = $(this).scrollTop()+topMenuHeight;
   
   // Get id of current scroll item
   var cur = scrollItems.map(function(){
     if ($(this).offset().top < fromTop)
       return this;
   });
   // Get the id of the current element
   cur = cur[cur.length-1];
   var id = cur && cur.length ? cur[0].id : "";
   
   if (lastId !== id) {
       lastId = id;
       // Set/remove active class
       menuItems
         .parent().removeClass("active")
         .end().filter("[href='#"+id+"']").parent().addClass("active");
   }                   
}

// Update slide switch highlight
function slideSwitch() {
	$('.switch-slide').on('click', function() {
		
	var activeSpan = $('.switch-toggle-slide .active');

	if (activeSpan.css('left') == '0px') {
		activeSpan.css('left', '50%');
	}
	
	if (activeSpan.css('left') == '125px') {
		activeSpan.css('left', '0');
	}
	
	if ($(this).hasClass('active-switch')) {
		$('.switch-slide').addClass('active-switch')
		$(this).removeClass('active-switch');
	}
	else {
		$('.switch-slide').removeClass('active-switch')
		$(this).addClass('active-switch');
	}
	});
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console