php 按钮美化,input(file)按钮样式美化第二种

此代码可以把input按钮隐藏，并且移至A标签的上面，这样的话就美观多了，我们只需要把A标签美化，点击A标签就可以实现上传功能了，下面贴出代码。

html代码：

选择文件

CSS代码：

.file {

position: relative;

display: inline-block;

background: #ccc;

border: 1px solid #333;

padding: 4px 20px;

overflow: hidden;

text-decoration: none;

text-indent: 0;

line-height: 20px;

border-radius: 20px;

color: #333;

font-size: 13px;

}

.file input {

position: absolute;

font-size: 100px;

right: 0;

top: 0;

opacity: 0;

}

.gradient{

filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#fff,endcolorstr=#ccc,gradientType=0);

-ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#fff,endcolorstr=#ccc,gradientType=0);/*IE8*/

background:#ccc; /* 一些不支持背景渐变的浏览器 */

background:-moz-linear-gradient(top, #fff, #ccc);

background:-webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#ccc));

background:-o-linear-gradient(top, #fff, #ccc);

}

还有另一种效果，点击查看