我有一位设计师帮我制作了看起来像按钮的链接，这些按钮看起来像这样:http://www.comehike.com/hikes/scheduled_hike.php?hike_id=233 (黄色按钮分别是RSVP、Ride、Drive等)
那些不是图像。它们只是带样式的链接。
我的问题是 - 我可以为表单中的提交按钮制作类似类型的非图像按钮吗？
谢谢!
最佳答案
具有悬停效果的提交按钮。
<!doctype html>
<head>
<style>
.button{
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius: 6x;
border: 1px solid #ABABAB;
background-image: -webkit-gradient(linear, left top, left bottom, from(#E1E1E1), to(#F7F7F7));
background-image: -webkit-linear-gradient(top, #E1E1E1, #F7F7F7);
background-image: -moz-linear-gradient(top, #E1E1E1, #F7F7F7);
background-image: -ms-linear-gradient(top, #E1E1E1, #F7F7F7);
background-image: -o-linear-gradient(top, #E1E1E1, #F7F7F7);
background-image: linear-gradient(top, #E1E1E1, #F7F7F7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#E1E1E1', EndColorStr='#F7F7F7');
padding: 15px 0px;
margin: 0 auto;
width: 224px;
display: block;
color: #434953;
text-transform: uppercase;
font: 182% "League Gothic", Helvetica, Arial, sans-serif;
text-decoration:none;
text-align:center;
}
.button:hover{
border: 1px solid #ABABAB;
color: #303030;
background-image: -webkit-gradient(linear, left top, left bottom, from(#F7F7F7), to(#E1E1E1));
background-image: -webkit-linear-gradient(top, #F7F7F7, #E1E1E1);
background-image: -moz-linear-gradient(top, #F7F7F7, #E1E1E1);
background-image: -ms-linear-gradient(top, #F7F7F7, #E1E1E1);
background-image: -o-linear-gradient(top, #F7F7F7, #E1E1E1);
background-image: linear-gradient(top, #F7F7F7, #E1E1E1);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#F7F7F7', EndColorStr='#E1E1E1');
-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.10) inset;
-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.10) inset;
box-shadow: 0px 0px 5px rgba(0,0,0,0.10) inset;
}
</style>
</head>
<body>
<input type="submit" class="button" value="submit" />
</body>
关于html - 如何在表单提交按钮中制作不是图像的按钮外观按钮？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7519554/