按钮初体验
html 表示中作为按钮的标签有 button 和 input
<!-- type="button"可省，省略时表示type="submit" -->
<button type="button">按钮</button>
<!-- 也可为type="submit" 此时主要用在表单提交中（如登录时），此时type不能省略 -->
<input type="button" value="按钮" />
我们来看看默认的按钮效果： <button> 按钮 </button > 或 < input type="button" value="按钮" /><!-- 为了简单，本篇就默认前一种 -->
默认的按钮太丑了有木有？肿么让它变得好看点呢？此时就是 css 展示它的功法了。
css 神奇初见
css 全称为层叠样式表，简单说来就是实现网页的效果，如按钮美化。
<button style="width: 80px;height: 40px;background: #4CAF50;- border: none;">按钮</button>
变漂亮点了对不对？让我们来解释一下：
-
style="" style 翻译成中文就是样式，引号里边的内容就表示这个按钮的样式。 注：给 Html 元素设置 css 样式有三种，此为第一种，后面再介绍
-
width: 80px;style 里边的样式格式为： 属性：值；这里表示宽度为 80 个像素点，后边的 height 就很容易明白表示高度为 40px 了。
-
background: #4CAF50; 设置按钮背景颜色为 #4CAF50（16 进制），这里你可以设置为任何你喜欢的颜色。
-
border: none; 取消按钮的边框
变化一下按钮样式
<button style="width: 80px;height: 40px;background: #4CAF50;border: none;color: white;font-size: 16px;">按钮</button>
<button style="width: 80px;height: 40px;background: none;border: #4CAF50 solid 1px;">按钮</button>
我们发现左边按钮的文字颜色变了，大小也变了，怎么实现的呢？ 很容易发现，我在 style 中设置了 color: white;font-size: 16px; 没错就是 color 和 font-size，再看右边一个按钮，我设置了背景为 none，边框 border 为 1 像素，solid 样式，颜色值跟左边背景色一样。
css 使用方式之二
有没有发现上边随着 style 样式加多，代码会变得很长，为了解决这个问题（当然此种方式目的不只是这个），我们使用第二种方式：
<!-- 首先在head中加入一下代码 -->
<style>
button{
width: 80px;
height: 40px;
background: #4CAF50;
border: none;
color: white;
font-size: 16px;
}
</style>
<!-- 第二步：按钮代码 -->
<button>按钮</button>
最终效果：
肿么样，有木有很神奇？这样子的按钮代码看起来就简洁多了，这就是所谓的 css 第二种使用方式，即把它放在 style 标签中，通常是放在 head 里面。
第二种使用方式的：button 称之为选择器，任何 html 标签都可以用作选择器，除此之外还有很多其他的选择器，常用的有 id 选择器和 class 选择器：
#btnSubmit{…}
.btnCancel{…}
其中 id 和 class 都是 html 标签的属性，css 的第一种用法的 style 就是一种属性。
具体实例：
/*这里边是css中的注释，浏览器会将其忽略*/
/*class*/
.btn{
padding: 10px 20px;
cursor: pointer;/*使鼠标放上边显示手指形状*/
font-size: 16px;
margin: 4px 2px;
text-align: center;/*文本居中显示*/
text-decoration: none;/*取消文本的默认修饰，如取消链接默认的下划线*/
display: inline-block;
}
/*id*/
#active_a{
text-decoration: none;
color: #4CAF50;
font-weight: bold;
}
css 第三种使用方式
另外建立一个 xxx.css 文件，将 css 代码放在这个文件里边，然后在页面中引入：
<link rel="stylesheet" href="xxx.css" />
注：放在单独的 css 文件里边的 css 代码不需要放入 style 标签里。
<!-- 直接类似于这样就行 -->
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* 鼠标移上去后修改下拉菜单链接颜色 */
.dropdown-content a:hover {background-color: #f1f1f1}
/* 在鼠标移上去后显示下拉菜单 */
.dropdown:hover .dropdown-content {
visibility: visible;
opacity: 1;
height: 200px;
min-width: 160px;
}
附完整的样式及使用
button.css
.btn{
padding: 10px 20px;
cursor: pointer;
font-size: 16px;
margin: 4px 2px;
text-align: center;
text-decoration: none;
display: inline-block;
}
.btn-disabled{
opacity: 0.6;
cursor: not-allowed;
}
.btn-default{
border: 1px solid #e7e7e7;
}
.btn-green{
border: 1px solid #4CAF50;
}
.btn-radius{
border-radius:5px;
}
.btn-red{
border: 1px solid #f44336;
}
.btn-default,.btn-green,.btn-red{
border-radius:5px;
background: none;
z-index: 3000;
}
.btn-bg-green{
background-color: #4CAF50;
}
.btn-bg-blue{
background-color: #008CBA;
}
.btn-bg-red{
background-color: #f44336;
}
.btn-bg-gray{
background-color: #e7e7e7;
color: black;
border: none;
}
.btn-bg-blank{
background-color: #555555;
}
.btn-bg-pink{
background-color: #FFC1C1;
}
.btn-bg-blue,.btn-bg-green,.btn-bg-red,.btn-bg-blank,.btn-bg-pink{
border: none;
color: white;
}
button.html 部分
<h3>按钮</h3>
<button class="btn btn-default">默认</button>
<button class="btn btn-bg-pink">粉色</button>
<button class="btn btn-green">绿色</button>
<button class="btn btn-bg-green">绿色</button>
<button class="btn btn-bg-blue btn-radius">蓝色</button>
<button class="btn btn-bg-red">红色</button>
<button class="btn btn-bg-gray">灰色</button>
<button class="btn btn-bg-blank">黑色</button>
