Demo: button set download

Css Button

Source Code	Result
<!-- HTML Codes by Testtemplatekhoi.blogspot.com --><!DOCTYPE html><html> <head> <style>.center { text-align: center; color: green; } hr { width: 50%; text-align: center; color: orange; background-color: orange; } /* CSS BUTTON *********************/ .button { cursor: pointer; border: 1px solid #969378; background-color: #826113; filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#d49d3f', endColorstr='#826113'); background-image: -webkit-linear-gradient(top, #d49d3f 0%, #e3c08f 50%, #826113 100%); background-image: -moz-linear-gradient(top, #d49d3f 0%, #e3c08f 50%, #826113 100%); background-image: -ms-linear-gradient(top, #d49d3f 0%, #e3c08f 50%, #826113 100%); background-image: -o-linear-gradient(top, #d49d3f 0%, #e3c08f 50%, #826113 100%); background-image: linear-gradient(top, #d49d3f 0%, #e3c08f 50%, #826113 100%); padding: 5px 8px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 2px; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0px 1px 2px #515151; -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0px 1px 2px #515151; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0px 1px 2px #515151; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); color: #4d454d; font: normal 16px 'Cooper Black', Helvetica, Arial, Sans-Serif; text-decoration: none; outline: none; vertical-align: middle; } .button:hover { border-color: #969378; background-color: #947434; filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#947434', endColorstr='#573906'); background-image: -webkit-linear-gradient(top, #947434 0%, #dec99e 50%, #573906 100%); background-image: -moz-linear-gradient(top, #947434 0%, #dec99e 50%, #573906 100%); background-image: -ms-linear-gradient(top, #947434 0%, #dec99e 50%, #573906 100%); background-image: -o-linear-gradient(top, #947434 0%, #dec99e 50%, #573906 100%); background-image: linear-gradient(top, #947434 0%, #dec99e 50%, #573906 100%); color: #4f4f4f; } .button:active { background-color: #573906;color:white; filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#573906', endColorstr='#947434'); background-image: -webkit-linear-gradient(top, #573906, #947434); background-image: -moz-linear-gradient(top, #573906, #947434); background-image: -ms-linear-gradient(top, #573906, #947434); background-image: -o-linear-gradient(top, #573906, #947434); background-image: linear-gradient(top, #573906, #947434); } / END CSS BUTTON **********************/ </style> </head><body> <h1 class="center"> <a href="http://testtemplatekhoi.blogspot.com/2014/10/cong-cu-tao-button-tuy-chinh.html" target="_blank">Công cụ tạo Css Button tùy chỉnh</a> </h1><p class="center"> Thay đổi Css các bạn vừa tạo vào thẻ<code><span style="color:red"> 'style'</span></code>.<br/> Nếu các bạn đổi class trong css thì đổi luôn trong thẻ <code><span style="color:red">'body'</span></code>. </p><hr/> <span class="button">Demo</span><br/><br/> <button class="button">Submit</button><br/><br/> <a class="button" href="#">Download</a><br/><br/> <input type="button" class="button" value="Button name"/></body></html>

Source Code

Result

<!DOCTYPE html><html> <head>  <style>.center {     text-align: center;     color: green; } hr {     width: 50%;     text-align: center;     color: orange;     background-color: orange; } /* CSS BUTTON **********************/ .button {     cursor: pointer;     border: 1px solid #969378;     background-color: #826113;     filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#d49d3f', endColorstr='#826113');     background-image: -webkit-linear-gradient(top, #d49d3f 0%, #e3c08f 50%, #826113 100%);     background-image: -moz-linear-gradient(top, #d49d3f 0%, #e3c08f 50%, #826113 100%);     background-image: -ms-linear-gradient(top, #d49d3f 0%, #e3c08f 50%, #826113 100%);     background-image: -o-linear-gradient(top, #d49d3f 0%, #e3c08f 50%, #826113 100%);     background-image: linear-gradient(top, #d49d3f 0%, #e3c08f 50%, #826113 100%);     padding: 5px 8px;     -webkit-border-radius: 3px;     -moz-border-radius: 3px;     border-radius: 2px;     -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0px 1px 2px #515151;     -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0px 1px 2px #515151;     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0px 1px 2px #515151;     text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);     color: #4d454d;     font: normal 16px 'Cooper Black', Helvetica, Arial, Sans-Serif;     text-decoration: none;     outline: none;     vertical-align: middle; } .button:hover {     border-color: #969378;     background-color: #947434;     filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#947434', endColorstr='#573906');     background-image: -webkit-linear-gradient(top, #947434 0%, #dec99e 50%, #573906 100%);     background-image: -moz-linear-gradient(top, #947434 0%, #dec99e 50%, #573906 100%);     background-image: -ms-linear-gradient(top, #947434 0%, #dec99e 50%, #573906 100%);     background-image: -o-linear-gradient(top, #947434 0%, #dec99e 50%, #573906 100%);     background-image: linear-gradient(top, #947434 0%, #dec99e 50%, #573906 100%);     color: #4f4f4f; } .button:active {     background-color: #573906;color:white;     filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#573906', endColorstr='#947434');     background-image: -webkit-linear-gradient(top, #573906, #947434);     background-image: -moz-linear-gradient(top, #573906, #947434);     background-image: -ms-linear-gradient(top, #573906, #947434);     background-image: -o-linear-gradient(top, #573906, #947434);     background-image: linear-gradient(top, #573906, #947434); } /* END CSS BUTTON **********************/   </style> </head><body>   <h1 class="center">      <a href="http://testtemplatekhoi.blogspot.com/2014/10/cong-cu-tao-button-tuy-chinh.html" target="_blank">Công cụ tạo Css Button tùy chỉnh</a>  </h1><p class="center">      Thay đổi Css các bạn vừa tạo vào thẻ<code><span style="color:red"> 'style'</span></code>.<br/>      Nếu các bạn đổi class trong css thì đổi luôn trong thẻ <code><span style="color:red">'body'</span></code>. </p><hr/>     <span class="button">Demo</span><br/><br/>     <button class="button">Submit</button><br/><br/>     <a class="button" href="#">Download</a><br/><br/>     <input type="button" class="button" value="Button name"/></body></html>

Bạn có thể test thử trênTest Html Editor
Link to this page: