我想向“下载”按钮添加样式,它看起来是如此正式。想添加一些按钮样式,有人可以帮我吗?
该代码是100%正确的,只想使“下载”按钮具有给定样式的时尚。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body {
font-family: Arial;
font-size: 10pt;
}
</style>
</head>
<body>
<input type="button" value="Download" onclick="DelayRedirect()" />
<br />
<br />
<div id="dvCountDown" style="display: none"> You will be redirected after
<span id="lblCount"></span> seconds.
</div>
</body>
</html>
我要添加的CSS在下面给出-
<style>
.button {
background-color: DodgerBlue;
border: none;
color: white;
padding: 12px 30px;
cursor: pointer;
font-size: 20px;
}
/* Darker background on mouse-over */
.button:hover {
background-color: RoyalBlue;
}
</style>
您没有按钮的属性。采用:
input[type="button"]{ /*<-- this is how you refer to an element like INPUT */
background-color: DodgerBlue;
border: none;
color: white;
padding: 12px 30px;
cursor: pointer;
font-size: 20px;
}
input[type="button"]:hover {
background-color: RoyalBlue;
}
<input type="button" value="Download" onclick="DelayRedirect()" />
<br />
<br />
<div id="dvCountDown" style="display: none"> You will be redirected after
<span id="lblCount"></span> seconds.
</div>
如何引用样式
所有这些都可以在您的输入按钮中使用,如下所示:
<input class="className"......>
<input id="idName".......>
<input.....>
请参阅:HTML类
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句