Edit in JSFiddle

<div id ="youtube">
    <button class="button">Regular</button>
    <button class="button parent">Dropdown</button>
    <button class="button animated"  >Animated </button>
    <button class="button color"  >Colored</button>
</div>

#youtube {
            padding:40px 20px;
            margin-bottom:40px;
            background:#E8E8E8 url(http://www.416studios.co.uk/journal/demo/img/youtube.png);
            box-shadow:5px 5px 5px rgba(0,0,0,0.5);
        }
        
.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 arial;
   padding: 6px 10px;
   white-space: nowrap;
   vertical-align: middle;
   color: #666;
   background: transparent;
   cursor: pointer;
   margin-bottop:10px;
}
.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);
   background:    -moz-linear-gradient(top, #E6E6E6);
   background:     -ms-linear-gradient(top, #E6E6E6);
   background:      -o-linear-gradient(top, #E6E6E6);
}

.animated {
    
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}

.color, .color:hover {background:#E9BB8F;

}

.color:hover{
background-image: linear-gradient(bottom, rgb(201,161,127) 0%, rgb(233,187,143) 50%);
background-image: -o-linear-gradient(bottom, rgb(201,161,127) 0%, rgb(233,187,143) 50%);
background-image: -moz-linear-gradient(bottom, rgb(201,161,127) 0%, rgb(233,187,143) 50%);
background-image: -webkit-linear-gradient(bottom, rgb(201,161,127) 0%, rgb(233,187,143) 50%);
background-image: -ms-linear-gradient(bottom, rgb(201,161,127) 0%, rgb(233,187,143) 50%);}

.parent: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;
}
.parent:hover:after {
   border-top-color: black;
}