<!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);}