html5 渐变按钮练习

2023-04-27 02:40•html•阅读 1535

<!DOCTYPE html>

<html >

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

}