服装按钮可点击网站..like this答案

【问题标题】：costume button clickable for website..like this one服装按钮可点击网站..like this
【发布时间】：2015-08-06 13:54:51
【问题描述】：

我得到了这个代码

<!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>

但是如何制作这样的按钮 http://ak8.picdn.net/shutterstock/videos/2577947/preview/stock-footage-eject-button-on-a-white-background.mp4

【问题讨论】：

这样的设计/风格是什么意思？
是的设计..我的意思是我想要但我给你看的弹出按钮..不是我现在得到的普通按钮
您可以运行动画 gif，或使用 html5 画布标签

标签： javascript jquery html css button

【解决方案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;;

&lt;button&gt;Eject&lt;/button&gt;

【讨论】：

thnx 关于那个 :) 但我怎样才能删除按钮prntscr.com/81k2fh
编辑了我的答案并删除了按钮周围的蓝色轮廓..基本上只需添加轮廓：0px !important;