一、好看的按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML CSS Exercise CSS3 button</title>
<style type="text/css">
button {
width: 200px;
padding:8px;
background-color: #428bca;
border-color: #357ebd;
color: #fff;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
text-align: center;
vertical-align: middle;
border: 1px solid transparent;
font-weight: 900;
font-size:125%
}
</style>
</head>
<body>
<button>
Subscribe Now
</button>
</body>
</html>
二、html button按钮模拟超链接的三种方法
方法一:form表单方法
实现代码:
<form method="get" action="http://www.manongjc.com">
<button type="submit">Continue</button>
</form>
方法二:window.location.href 方法
代码如下:
<button onclick="window.location.href='http://www.manongjc.com'">Continue</button>
来源:
http://www.cnblogs.com/yojiaku/p/5736447.html
http://www.manongjc.com/article/2209.html
方法三:在button之外添加超链接
<a href="http://www.manongjc.com" target="_blank">
<button>My Button</button>
</a>