Question

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>

but how its possible to make the button like this http://ak8.picdn.net/shutterstock/videos/2577947/preview/stock-footage-eject-button-on-a-white-background.mp4

Answer 1

这是一个很好的例子，你可以做到这一点.. :)）

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>

costume button clickable for website..like this one

1 个答案: