YouTube (Popup) Buttons (from the footer)

<!DOCTYPE html>
<html>
<head>
        <meta charset="UTF-8">
        
        <title>YouTube Buttons</title>
        
        <link rel="stylesheet" href="css/style.css">
        
        <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></head>

<body>

<div id="page-wrap">
                
                 <a href="HTML5/youtube-buttons.html">
				<button class="button" role="button">
                  Button #1
                </button>
                </a>
				
                <a href="HTML5/youtube-buttons.html">
				<button class="button" role="button">
                  Button #2
                </button>
                </a>
                
                <a href="HTML5/youtube-buttons.html">
				<button class="button" role="button">
                  Button #3
                </button>
                </a>
        
        </div>

</body>

</html>

To get rid of the dropdown arrows, remove the .button:after declaration block.

Source: http://www.css-tricks.com/youtube-popup-buttons

How Much?
Custom website packages
start from $1,000 CAD.

How Long?
The web design and development process takes
2 to 8 weeks, depending on website's complexity.

Get in Touch:
Email: info@webforward.ca
Call me: 647.629.2876