Önizleme: Örnek Düğme

İlk olarak bu stil kodunu sitenize bir kere ekleyin:

                             <!--Kod Dostu Youtube Temalı Buton Kodu START--> <!--Bu çalışma Creative Commons Attribution 3.0 Unported Lisansı ile lisanslanmıştır.--> <!--Telif Sahibi: www.koddostu.com--> <style> /*koddostu.com tarafından kodlanmıştır*/ .koddostu-tube{background-color:#ccc;display:inline-block;height:30px;padding-left:8px;padding-right:8px;line-height:30px;font-family:Arial, sans-serif;font-size:11px;color:#555;font-weight:bold;text-decoration:none;-webkit-border-radius: 3px;border-radius: 3px;text-shadow:#FFFFFF 0px 1px 1px ;border:1px solid #ccc;background-image: linear-gradient(bottom, #DCDCDC 0%, #FAFAFA 100%);background-image: -o-linear-gradient(bottom, #DCDCDC 0%, #FAFAFA 100%);background-image: -moz-linear-gradient(bottom, #DCDCDC 0%, #FAFAFA 100%);background-image: -webkit-linear-gradient(bottom, #DCDCDC 0%, #FAFAFA 100%);background-image: -ms-linear-gradient(bottom, #DCDCDC 0%, #FAFAFA 100%);background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #DCDCDC),color-stop(1, #FAFAFA));} /*koddostu.com tarafından kodlanmıştır*/ .koddostu-tube:focus{outline:0px;} /*koddostu.com tarafından kodlanmıştır*/ .koddostu-tube:hover{border:1px solid #aaa;background-image: linear-gradient(bottom, #F0F0F0 0%, #E6E6E6 100%);background-image: -o-linear-gradient(bottom, #F0F0F0 0%, #E6E6E6 100%);background-image: -moz-linear-gradient(bottom, #F0F0F0 0%, #E6E6E6 100%);background-image: -webkit-linear-gradient(bottom, #F0F0F0 0%, #E6E6E6 100%);background-image: -ms-linear-gradient(bottom, #F0F0F0 0%, #E6E6E6 100%);background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #F0F0F0),color-stop(1, #E6E6E6));-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25);-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25);box-shadow: 0 1px 2px rgba(0,0,0,0.25);} /*koddostu.com tarafından kodlanmıştır*/ .koddostu-tube:active{border:1px solid #aaa;border-bottom:1px solid #ccc;border-top:1px solid #888;background-image: linear-gradient(bottom, #E6E6E6 0%, #B8B8B8 100%);background-image: -o-linear-gradient(bottom, #E6E6E6 0%, #B8B8B8 100%);background-image: -moz-linear-gradient(bottom, #E6E6E6 0%, #B8B8B8 100%);background-image: -webkit-linear-gradient(bottom, #E6E6E6 0%, #B8B8B8 100%);background-image: -ms-linear-gradient(bottom, #E6E6E6 0%, #B8B8B8 100%);background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #E6E6E6),color-stop(1, #B8B8B8));-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none;} /*koddostu.com tarafından kodlanmıştır*/ </style> <!--Bu çalışma Creative Commons Attribution 3.0 Unported Lisansı ile lisanslanmıştır.--> <!--Telif Sahibi: www.koddostu.com--> <!--Kod Dostu Youtube Temalı Buton Kodu STOP-->

Ardından, buton görünmesini istediğiniz

 her yere, bu koddan ekleyebilirsiniz:

                              <koddostu> <a href="http://koddostu.com" target="_blank" class="koddostu-tube"> Örnek Düğme </a> </koddostu>

Kaynak: http://www.koddostu.com/2012/10/youtube-temal-buton-kodu-ekle.html