---

<button class="button">Yotube Button</button>
<style>

.button {

   border: 1px solid #DDD;

   border-radius: 3px;

   text-shadow: 0 1px 1px white;

   -webkit-box-shadow: 0 1px 1px #fff;

   -moz-box-shadow:    0 1px 1px #fff;

   box-shadow:         0 1px 1px #fff;

   font: bold 11px Sans-Serif;

   padding: 6px 10px;

   white-space: nowrap;

   vertical-align: middle;

   color: #666;

   background: transparent;

   cursor: pointer;

}

.button:hover, .button:focus {

   border-color: #999;

   background: -webkit-linear-gradient(top, white, #E0E0E0);

   background:    -moz-linear-gradient(top, white, #E0E0E0);

   background:     -ms-linear-gradient(top, white, #E0E0E0);

   background:      -o-linear-gradient(top, white, #E0E0E0);

   -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;

   -moz-box-shadow:    0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;

   box-shadow:         0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;

}

.button:active {

   border: 1px solid #AAA;

   border-bottom-color: #CCC;

   border-top-color: #999;

   -webkit-box-shadow: inset 0 1px 2px #aaa;

   -moz-box-shadow:    inset 0 1px 2px #aaa;

   box-shadow:         inset 0 1px 2px #aaa;

   background: -webkit-linear-gradient(top, #E6E6E6, gainsboro);

   background:    -moz-linear-gradient(top, #E6E6E6, gainsboro);

   background:     -ms-linear-gradient(top, #E6E6E6, gainsboro);

   background:      -o-linear-gradient(top, #E6E6E6, gainsboro);

}

.button:after {

   content: "";

   display: inline-block;

   width: 0;

   height: 0;

   border-top: 4px solid #999;

   border-left: 4px solid transparent;

   border-right: 4px solid transparent;

   margin: 0 0 0 4px;

   position: relative;

   top: -1px;

}

.button:hover:after {

   border-top-color: black;

}

</style>

--
※ 作者: Farland 時間: 2012-01-31 13:39:00