CSS 设置按钮，文本输入框

来源：互联网发布：ff14人男大叔捏脸数据编辑：程序博客网时间：2024/06/04 08:03

CSS 设置按钮，文本输入框

这次我第一次写CSS方面的博客，这个HTML+CSS也才刚刚起步，可能写的有些片面、不足望大家指正。

首先来写一个按钮，用<a>标签来写直接上代码

下面来一一讲解看现象

首先来个最基本的按钮

CSS部分：

/*设置字体、大小和颜色*/

font-family:"微软雅黑";

font-size:15px;

color:white;

/*按钮大小*/

height:30px;

width:50px;

/*设置按钮背景颜色*/

background-color:#5BEFB5;

}

HTML部分：

<body>

</body>

HTML部分不变，得到最基本的按钮，发现按钮太小改变height个width发现怎么变都只有那么大，原来<a>标签是行内元素height和width不起作用，那么我们需要将行内元素改为块元素，于是我们添加这样一句（红色部分）

/*使行内元素为块元素*/

display:inline-block;

/*设置字体、大小和颜色*/

font-family:"微软雅黑";

font-size:15px;

color:white;

/*按钮大小*/

height:30px;

width:50px;

background-color:#5BEFB5;

}

这下我们发现我们设置的height和width起到作用了，但是我们发现在提交两个字下有一条横线，这是不需要的，于是我们又添加一句（红色部分）

/*使行内元素为块元素*/

display:inline-block;

/*设置字体、大小和颜色*/

font-family:"微软雅黑";

font-size:15px;

color:white;

/*按钮大小*/

height:30px;

width:50px;

text-decoration:none;

background-color:#5BEFB5;

}

这时我们发现那条横线不见了，但是我们又觉得这个字没有在按钮的中间，于是我们又加入一句（红色部分）

/*使行内元素为块元素*/

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的值也行。这里我们采取第一种办法（红色部分）

/*使行内元素为块元素*/

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;

}

于是得到了这样的按钮，现在是不是有点样子了。但感觉还是不够好看于是我们加一加圆角和阴影（红色部分）

/*使行内元素为块元素*/

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部分：

/*使行内元素为块元素*/

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>

</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;/*设置圆角就不多说了*/

}

看一下整体效果是不是还可以啊！

1 0