CSS 设置按钮，文本输入框
这次我第一次写CSS方面的博客，这个HTML+CSS也才刚刚起步，可能写的有些片面、不足望大家指正。
首先来写一个按钮，用<a>标签来写直接上代码
下面来一一讲解看现象
首先来个最基本的按钮
CSS部分：
a{
/*设置字体、大小和颜色*/
font-family:"微软雅黑";
font-size:15px;
color:white;
/*按钮大小*/
height:30px;
width:50px;
/*设置按钮背景颜色*/
background-color:#5BEFB5;
}
HTML部分：
<body>
<a href="javascript:void(0)">提交</a>
</body>
HTML部分不变，得到最基本的按钮，发现按钮太小改变height个width发现怎么变都只有那么大，原来<a>标签是行内元素height和width不起作用，那么我们需要将行内元素改为块元素，于是我们添加这样一句（红色部分）
a{
/*使行内元素为块元素*/
display:inline-block;
/*设置字体、大小和颜色*/
font-family:"微软雅黑";
font-size:15px;
color:white;
/*按钮大小*/
height:30px;
width:50px;
background-color:#5BEFB5;
}
这下我们发现我们设置的height和width起到作用了，但是我们发现在提交两个字下有一条横线，这是不需要的，于是我们又添加一句（红色部分）
a{
/*使行内元素为块元素*/
display:inline-block;
/*设置字体、大小和颜色*/
font-family:"微软雅黑";
font-size:15px;
color:white;
/*按钮大小*/
height:30px;
width:50px;
text-decoration:none;
background-color:#5BEFB5;
}
这时我们发现那条横线不见了，但是我们又觉得这个字没有在按钮的中间，于是我们又加入一句（红色部分）
a{
/*使行内元素为块元素*/
display:inline-block;
/*设置字体、大小和颜色*/
font-family:"微软雅黑";
font-size:15px;
color:white;
/*按钮大小*/
height:30px;
width:50px;
text-decoration:none;
background-color:#5BEFB5;
text-align:center;
}
于是按钮变成这样，但只是水平居中，垂直方向却没有居中，于是接着加入line-height:30px;通过设置行间距与按钮高度相等的值即可垂直居中，但这只适合单行，有些元素有一个vertical-align属性可以设置，只适合valign特性的元素，但<a>标签没有该属性，其实我们也可以通过设置padding的值也行。这里我们采取第一种办法（红色部分）
a{
/*使行内元素为块元素*/
display:inline-block;
/*设置字体、大小和颜色*/
font-family:"微软雅黑";
font-size:15px;
color:white;
/*按钮大小*/
height:30px;
width:50px;
/*设置垂直居中*/
line-height:30px;
text-decoration:none;
background-color:#5BEFB5;
text-align:center;
}
于是得到了这样的按钮，现在是不是有点样子了。但感觉还是不够好看于是我们加一加圆角和阴影（红色部分）
a{
/*使行内元素为块元素*/
display:inline-block;
/*设置字体、大小和颜色*/
font-family:"微软雅黑";
font-size:15px;
color:white;
/*按钮大小*/
height:30px;
width:50px;
/*设置垂直居中*/
line-height:30px;
text-decoration:none;
background-color:#5BEFB5;
text-align:center;
border-radius:5px;
box-shadow:2px 2px 2px gray;
}
得到现在这个，是不是有点样子了，但我还是感觉有点单调朴素，要不来个动态效果于是我们又可以加入下面的（红色部分）
a:hover{
/*重设背景颜色*/
background-color:#2C3E50;
/*背景颜色过渡时间*/
transition:background-color 0.3s linear;
-moz-transition: background-color 0.3s linear;/*Firefox 4 */
-webkit-transition: background-color 0.3slinear; /* Safari 和 Chrome */
-o-transition: background-color 0.3s linear;
/*经过按钮时，按钮扩大1.1倍*/
transform:scale(1.1);
}
这样就得到了当鼠标移到按钮上时，按钮会变大1.1倍，在0.3s内按钮背景颜色会从#5BEFB5变成#2C3E50，中间的一些代码是解决浏览器不兼容的问题。其中IE10以下版本不支持transition属性。得到如下效果：
鼠标移动到按钮前，鼠标移动到按钮上，这里有个放大效果哦。
下面是完整的源码：
CSS部分：
<style type="text/css">
a{
/*使行内元素为块元素*/
display:inline-block;
/*设置字体、大小和颜色*/
font-family:"微软雅黑";
font-size:15px;
color:white;
/*按钮大小*/
height:30px;
width:50px;
line-height:30px;
/*文字居中*/
text-align:center;
/*文字下面没有横线*/
text-decoration:none;
/*按钮颜色*/
background-color:#CFD7EB;
/*设置按钮四角的圆弧*/
border-radius:5px;
/*设置按钮阴影*/
box-shadow:2px2px 5px gray;
}
a:hover{
/*重设背景颜色*/
background-color:#2C3E50;
/*背景颜色过渡时间*/
transition:background-color0.3s linear;
-ms-transition:background-color 0.3s linear;
-moz-transition:background-color 0.3s linear;/* Firefox 4 */
-webkit-transition:background-color 0.3s linear; /* Safari 和 Chrome */
-o-transition:background-color 0.3s linear;
/*经过按钮时，按钮扩大1.1倍*/
transform:scale(1.1);
}
</style>
HTML部分：
<body>
<a href="javascript:void(0)">提交</a>
</body>
CSS 文本输入框
input{
display:inline-block;
/*设置输入框的大小*/
height:25px;
width:200px;
/*元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用,谷歌浏览器默认有强调，当然出现这种效果只会在谷歌等部分浏览器中*/
outline:none;
/*加了这句话后的效果*/
/*给输入框设置边框，边框颜色设为#e5e5e5，覆盖掉输入框上边框有黑色阴影的问题可以看到不加下面这句话时，输入框的上边框和左边框有黑色阴影，加了之后，原理就是设置白色边框覆盖掉黑色的阴影*/
border:1pxsolid #e5e5e5;
/*keyi*/
/*设置文字与边框的距离加了之后，是不是感觉更加舒服了呢*/
text-indent:0.5em;
/*padding-left:50px;也可以用padding来解决这个问题*/
border-radius:3px;/*设置圆角就不多说了*/
}
看一下整体效果是不是还可以啊！
扫一扫
5125
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
