Suit button clickable for website .. like this
I got this code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!--<script src="app1.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
</head>
<body>
<div id="clickdiv" >Start</div>
<button onclick="countTracker()">OneButton</button>
<script type="text/javascript">
var clickCount = 0;
function countTracker() {
clickCount += 1;
document.getElementById("clickdiv").innerHTML = "Clicks:" + clickCount;
localStorage.setItem("count", clickCount);
}
str_count = localStorage.getItem("count");
console.log(str_count);
</script>
</body>
</html>
+3
source to share
1 answer
Here's a quick example of how you can do this. :)
button {
outline: 0px !important;
border: 0px;
position: relative;
color: #FFF;
background-color: red;
font-weight: bold;
font-size: 25px;
display: block;
cursor: pointer;
text-shadow: 0px 2px 3px #AFAFAF;
padding: 4px;
-webkit-border-radius: 50%;
-moz-border-radius: 50;
border-radius: 50;
-webkit-box-shadow: 0px 12px 0px rgba(150,0,0,1), 0px 12px 25px rgba(0,0,0,.7), 0px -3px 15px rgba(0,0,0,0.3) inset;
-moz-box-shadow: 0px 12px 0px rgba(150,0,0,1), 0px 12px 25px rgba(0,0,0,.7), 0px -3px 15px rgba(0,0,0,0.3) inset;
box-shadow: 0px 12px 0px rgba(150,0,0,1), 0px 12px 25px rgba(0,0,0,.7), 0px -3px 15px rgba(0,0,0,0.3) inset;
margin: 100px auto;
width: 100px;
top: 0px;
height: 80px;
text-align: center;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
button:hover {
border: 0px !important;
outline: 0px !important;
}
button:active {
border: 0px !important;
outline: 0px !important;
position: relative;
top: 13px;
-webkit-box-shadow: 0px 3px 0px rgba(150,0,0,1), 0px 3px 6px rgba(0,0,0,.9), 0px -3px 15px rgba(0,0,0,0.3) inset;;
-moz-box-shadow: 0px 3px 0px rgba(150,0,0,1), 0px 3px 6px rgba(0,0,0,.9), 0px -3px 15px rgba(0,0,0,0.3) inset;;
box-shadow: 0px 3px 0px rgba(150,0,0,1), 0px 3px 6px rgba(0,0,0,.9), 0px -3px 15px rgba(0,0,0,0.3) inset;;
<button>Eject</button>
+1
source to share