1

我想为下载按钮添加样式，它看起来很正式。想添加一些按钮样式，有人可以帮我吗？

代码是 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>&nbsp;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>
4

1 回答 1

0

您的按钮没有任何归属。利用：

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>&nbsp;seconds. 
                    </div>

如何在样式中引用

  • .className 类
  • #idName 为 id
  • 元素的元素名称

所有这些都可以在您的输入按钮中使用，如下所示：

<input class="className"......>

<input id="idName".......>

<input.....>

请参阅：HTML 类

于 2020-06-21T17:09:12.307 回答