下面是一个使用CSS3制作时尚美观的渐变按钮的示例代码：
HTML部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>时尚美观的渐变按钮</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<button class="gradient-button">渐变按钮</button>
</div>
</body>
</html>
CSS部分：
.container {
text-align: center;
margin-top: 10%;
}
.gradient-button {
display: inline-block;
padding: 10px 20px;
border-radius: 30px;
font-size: 1.2em;
font-weight: bold;
color: #fff;
background-image: linear-gradient(to right, #f44336, #ff9800, #ffeb3b, #4caf50);
transition: background-position 0.3s;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.gradient-button:hover {
background-position: right center;
}
在上面的代码中，我们使用了CSS3的linear-gradient函数来定义渐变背景色，通过传递多个颜色值可以创建多色渐变。同时，我们使用了transition属性来实现鼠标悬浮时渐变背景色的过渡效果。最后，我们使用了box-shadow属性来添加阴影效果，使得按钮看起来更加立体。
效果如下：
