通过CSS 来改善Button 外观

在 HTML 文档中 <button> 标签每出现一次，javascript中Button 对象就会被创建。

Button 对象的属性

属性描述
accessKey 设置或返回访问某个按钮的快捷键。
disabled 设置或返回是否禁用按钮。
form 返回对包含按钮的表单的引用。
id 设置或返回按钮的 id。
name 设置或返回按钮的名称。
tabIndex 设置或返回按钮的 Tab 键控制次序。
type 返回按钮的表单类型。
value 设置或返回显示在按钮上的文本。

实例：通过CSS 来改善按钮的外观：

<!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>

　　

 

posted @ 2020-12-27 20:38  summer_xbc  阅读(229)  评论(0)    收藏  举报