Code: Select all
<style>
div{
margin:0 auto;
padding:10px;
vertical-align:middle;
background-image: -moz-linear-gradient(bottom, white 0%, #CCC 100%);
background-image: -o-linear-gradient(bottom, white 0%, #CCC 100%);
background-image: -webkit-linear-gradient(bottom, white 0%, #CCC 100%);
background-image: -ms-linear-gradient(bottom, white 0%, #CCC 100%);
background-image: linear-gradient(bottom, white 0%, #CCC 100%);
}
button{
color:#2b2b2b;
text-shadow:0 1px 0 #999;
font-size:18px;
font-weight:bold;
text-transform:uppercase;
cursor:pointer;
margin:0 5px;
border-radius:12px;
-moz-box-shadow:4px 4px 4px #CCC;
-o-box-shadow:4px 4px 4px #CCC;
-ms-box-shadow:4px 4px 4px #CCC;
-webkit-box-shadow:4px 4px 4px #CCC;
box-shadow:4px 4px 4px #CCC;
background-image: -moz-linear-gradient(top, #CCC 0%, #666 100%);
background-image: -o-linear-gradient(top, #CCC 0%, #666 100%);
background-image: -ms-linear-gradient(top, #CCC 0%, #666 100%);
background-image: -webkit-linear-gradient(top, #CCC 0%, #666 100%);
background-image: linear-gradient(top, #CCC 0%, #666 100%);
}
button:hover{
color:#3c3c3c;
background-image: -moz-linear-gradient(top, #CCC 0%, white 20%, #666 100%);
background-image: -o-linear-gradient(top, #CCC 0%, white 20%, #666 100%);
background-image: -ms-linear-gradient(top, #CCC 0%, white 20%, #666 100%);
background-image: -webkit-linear-gradient(top, #CCC 0%, white 20%, #666 100%);
background-image: linear-gradient(top, #CCC 0%, white 20%, #666 100%);
}
button:disabled{
color:#999;
cursor:default;
background:#CCC;
}
</style>
<body>
<div>
<button>Collect Gold</button>
</div>
</body>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script>
$.fn.disableFor = function(mins, secs) {
var i = [],
play = [];
this.click(function() {
var selector = $(this),
inDex = $(selector).index(),
prevText = $(selector).text();
i[inDex] = 0;
var inSeconds = mins * 60 + secs;
$(selector).prop("disabled", "disabled");
play[inDex] = setInterval(function() {
if(inSeconds > 60){
inSeconds = inSeconds - 1;
var minutes = Math.floor(inSeconds / 60);
var seconds = inSeconds % 60;
if(minutes >= 1){
if(seconds.toString().length > 1){
$(selector).text(minutes + ":" + seconds + " minutes left");
}else{
$(selector).text(minutes + ":" + "0" + seconds + " minutes left");
}
}else{
$(selector).text(seconds + " seconds left");
}
}else{
if(inSeconds > 1){
inSeconds = inSeconds - 1;
if(inSeconds.toString().length > 1){
$(selector).text(inSeconds + " seconds left");
}else{
$(selector).text("0" + inSeconds + " seconds left");
}
}else{
$(selector).prop("disabled", "");
clearInterval(play[inDex]);
$(selector).text(prevText);
}
}
}, 1000);
});
};
$(function() {
$("button").disableFor(2,0); // First parameter stands for minutes and the second for the seconds.
});</script>