<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- http://stackoverflow.com/questions/20743172/custom-button-in-bootstrap --> <div class="container"> <div class="row"> <h2>TEST Triangle Corners</h2> <br> <a href="#" class="triangle">Today's Special</a> <hr> <!-- Standard button --> <button type="button" class="btn btn-default triangle">Default</button> <hr> <h3>Try to do YouTube videos with triangl, like gmail does</h3> <hr> <img class="" src="https://i1.ytimg.com/vi/zJahlKPCL9g/mqdefault.jpg" width="400" > <hr> <h4>Buttons Play from youtube cdn</h4> <hr> <img id=":1kn" class="aSM" src="//ssl.gstatic.com/docs/doclist/images/mediatype/icon_2_youtube_x16.png"> <br> <img id=":1kn" class="aSM" src="//ssl.gstatic.com/docs/doclist/images/mediatype/icon_2_youtube_x32.png"> <br> <img id=":1kn" class="aSM" src="//ssl.gstatic.com/docs/doclist/images/mediatype/icon_2_youtube_x128.png"> <br> </div> </div>

.triangle{ background-color:grey; color: white; font-weight: bold; padding: 10px 15px; text-decoration: none; font-family: Arial; position:relative } .triangle:after{ background:red; content: ""; position: absolute; bottom: 0px; right: 0px; border-width: 0px 0px 13px 13px; border-style: solid; border-color: #fff transparent; display: block; width: 0; } .triangle:hover{ background: grey; }