March 25, 2015

3D button with click sound

3D button with click sound

An attractive button that plays sounds on mouseup and mousedown. The button gives you clicking effect.

HTML

<div id="contentWrapper">
  <div id="content">
    <audio id="clickSound">
      <source src="https://sites.google.com/site/vivinantony/sounds/tlt/click.mp3"></source>
      <source src="https://sites.google.com/site/vivinantony/sounds/tlt/click.ogg"></source>
      Audio not supported.
    </audio>

    <audio id="clickSound2">
      <source src="https://sites.google.com/site/vivinantony/sounds/tlt/clickUp.mp3"></source>
      <source src="https://sites.google.com/site/vivinantony/sounds/tlt/clickUp.ogg"></source>
      Audio not supported.
    </audio>

    <span id="button">Press</span>
  </div>
</div>

CSS

body{
    margin: 0 auto;
    padding: 0;
    font-family: 'Arimo', Quicksand_Book, Arial;
    font-size:14px;
    color:#333333;
}
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 #941530;
 
   -webkit-user-select: none;        
   -moz-user-select: none;
   -ms-user-select: none;
   -o-user-select: none;
   user-select: none;
 
   background: -webkit-linear-gradient(#db4363, #bd2444);
   background: -o-linear-gradient(#db4363, #bd2444);
   background: -moz-linear-gradient(#db4363, #bd2444);
   background: linear-gradient(#db4363, #bd2444);
 
   -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 {
   border-bottom:1px solid #941530;
   transform: translateY(3px);
}

jQuery

$( document ).ready(function() {
   var audio = $("#clickSound")[0];
   var audio2 = $("#clickSound2")[0];
   $("#button").mousedown(function() {
      audio2.play();
   });
   $("#button").mouseup(function() {
      audio.play();
   });
});

Attachments:

I have used external attachments.

https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
demo

No comments:

Post a Comment

Popular Posts

Views