อันนี้คือ HTML นะครับ
<html>
<head>
<title>Css Button</title>
a {text-decoration:none;}
.button {padding:10px;background:#eee;border-radius:5px;position:absolute;font-weight:bold;font-size:14px;color:#fff;text-shadow:0 -1px 0 #000;border:1px solid #9b0000;box-shadow:0 1px 0 rgba(255,255,255,.5) inset;}
.button {
background: #ff3019; /* Old browsers */
background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* IE10+ */
background: linear-gradient(to bottom, #ff3019 0%,#cf0404 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 ); /* IE6-9 */
}
.button:hover {
background: #cf0404; /* Old browsers */
background: -moz-linear-gradient(top, #cf0404 0%, #ff3019 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cf0404), color-stop(100%,#ff3019)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #cf0404 0%,#ff3019 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #cf0404 0%,#ff3019 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #cf0404 0%,#ff3019 100%); /* IE10+ */
background: linear-gradient(to bottom, #cf0404 0%,#ff3019 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cf0404', endColorstr='#ff3019',GradientType=0 ); /* IE6-9 */
}
</head>
<body>
<a href="#" class="button">Button Name</a>
</body>
</html>
จะไปสร้างไฟล์ .css หรือ จะยัดไปที่ <head>ก็แล้วแต่เลยครับ แต่แนะนำให้สร้างไฟล์ .css ดีกว่า สมมุต
<html>
<head>
<title>Css Button Turbo</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="#" class="button">Button Name</a>
</body>
</html>
พัฒนาเว็บไซต์
