<button>標簽默認的按鈕很丑，我們要想把它變得美觀，可以像這樣做：
示例代碼：button.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML CSS Exercise CSS3 button</title> <style type="text/css"> button { width: 200px; padding:8px; background-color: #428bca; border-color: #357ebd; color: #fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; /* future proofing */ -khtml-border-radius: 10px; /* for old Konqueror browsers */ text-align: center; vertical-align: middle; border: 1px solid transparent; font-weight: 900; font-size:125% } </style> </head> <body> <button> Subscribe Now </button> </body> </html>
示例效果：
怎么樣？是不是好看了許多？
這里主要應用了圓角這個概念：border-radius
這里有許多關於圓角的應用：
button
{
border:solid 10px #4d4e53;
border-radius:10px 40px 40px 10px;
}
示例效果：
border-radius: border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius
(左上，右上，右下，左下==》順時針）
button {
width: 200px;
padding:8px;
background-color: #f7f8f9;
color: #428bca;
text-align: center;
vertical-align: middle;
font-weight: 900;
font-size:125%
}
button{
border:groove 1em red;
border-radius:2em;
}
==>
這里的 border 的屬性：
button {
padding:8px;
color: #428bca;
text-align: center;
vertical-align: middle;
font-weight: 900;
font-size:125%
}
button{
background: gold;
border: ridge gold;
border-radius: 13em/3em;
width: 200px;
height: 100px;
}
==>
button {
padding:8px;
color: #428bca;
text-align: center;
vertical-align: middle;
font-weight: 900;
font-size:125%
}
button{
background: gold;
border: none;
border-radius: 40px 10px;
width: 200px;
height: 100px;
}
==>
button {
padding:8px;
color: #428bca;
text-align: center;
vertical-align: middle;
font-weight: 900;
font-size:125%
}
button{
background: gold;
border: none;
border-radius: 50%;
width: 200px;
height: 100px;
}
==>
