LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

	
Button
CSS
body{
	margin: 0 auto;
    padding: 0;
    font-family: 'Arimo', Quicksand_Book, Arial;
    font-size:14px;
    color:#333333;
    
	background: -webkit-radial-gradient(#F7F7F7, #CDCDCD);
    background: -o-radial-gradient(#F7F7F7, #CDCDCD);
    background: -moz-radial-gradient(#F7F7F7, #CDCDCD);
    background: radial-gradient(#F7F7F7, #CDCDCD);
	
	text-align:center;
}
a{
	text-decoration:none;
}
#contentWrapper{
    width: 90%;
	margin: 0 auto;
	text-align: center;
}
#content{
	text-align:center;
}

#button{
	text-align:center;
	margin:170px auto;
	padding: 20px 0px;
	display:block;
	height:30px;
	width:175px;
	
	cursor:pointer;
	font-size:25px;
	color:#F0F0F0;
	border-radius:10px;
	border-bottom:4px solid #0045A6;
	box-shadow: 6px 6px 6px #999;
	
	-webkit-user-select: none;        
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
	
	background: -webkit-linear-gradient(#00C8F8, #0067F7);
    background: -o-linear-gradient(#00C8F8, #0067F7);
    background: -moz-linear-gradient(#00C8F8, #0067F7);
    background: linear-gradient(#00C8F8, #0067F7);
	
	-webkit-transition: background 0.05s linear;  
    -moz-transition: background 0.05s linear;  
    -o-transition: background 0.05s linear;  
    transition: background 0.05s linear;
	
	background-size:1px 200px;
	
	transition: all .05s linear;
}

#button:hover{
	background-position:100px;
}

#button:active {
	box-shadow: 2px 2px 2px #777;
	border-bottom:1px solid #0045A6;
	transform: translateY(3px);
}
JS
$( document ).ready(function() {
	var audio = $("#clickSound")[0];
	var audio2 = $("#clickSound2")[0];
	$("#button").mousedown(function() {
	  audio2.play();
	});
	$("#button").mouseup(function() {
	  audio.play();
	});
});
Host Instantly Drag and Drop Website Builder

 

Description

An attractive, intuitive blue button that plays sounds on mouseup and mousedown.
Term
Mon, 11/27/2017 - 21:47

Related Codes

Pen ID
Pen ID
Pen ID