html5 漸變按鈕練習
阿新 • • 發佈：2018-09-30
按鈕 near utf-8 linear doc font charset sheet inpu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>漸變按鈕</title>
<link rel="stylesheet" href="style1.css" type="text/css">
</head>
<body>
<div>
<input type="button" value="漸變按鈕" class="but1">
<input type="button" value="漸變按鈕" class="but1 but2">
<input type="button" value="漸變按鈕" class="but1 but2 but3">
</div>
</body>
</html>
.but1
{
padding: 10px 20px;
font-size: 16px;
text-shadow: 2px 2px 3px rgba(0,0,0,0.8)
}
.but2{
border-radius: 10px;
}
.but3{
border-radius: 20px;
}
.but1{
background: linear-gradient(to left,orange,red);
}
.but1:hover{
background: red;
background: linear-gradient(to right,orange,red);
}
html5 漸變按鈕練習