CSS自制漂亮按钮

https://jingyan.baidu.com/article/77b8dc7f9ac31e6174eab69d.html

#button1{

        width: 100px;

        height: 30px;

        

        font-size: 18px;

        font-family: 微软雅黑;

        letter-spacing: 8px;

        padding-left: 12px;

}

添加基本的样式，设置大小为100*30px，字体大小18px，微软雅黑，字间距8px，向右移12px居中

继续往#button1内添加样式

border-radius: 5px;

设置按钮为圆角矩形，圆角半径为5px

上面的边框很难看，继续改边框的样式，添加

border: 1px solid #2576A8;

设置按钮边框宽为1px，样式为solid，颜色为#2576A8

给按钮加上渐变色

 background: -webkit-linear-gradient(top,#66B5E6,#2e88c0);

 background: -moz-linear-gradient(top,#66B5E6,#2e88c0);

background: linear-gradient(top,#66B5E6,#2e88c0);

 background: -ms-linear-gradient(top,#66B5E6,#2e88c0);

这四行是为兼容不同浏览器，颜色都是一样的，ie浏览器可能无法显示效果，

为更好的质感，再加一些内阴影效果

box-shadow: 0 1px 2px #8AC1E2 inset,0 -1px 0 #316F96 inset;

其中

0 1px 2px #B8DCF1 inset 是内高光

0 -1px 0 #316F96 inset 是内阴影

编辑一下字体样式

   color: #fff;

    text-shadow: 1px 1px 0.5px #22629B;

设置颜色为白色，文本阴影为向右向下各1px,0.5px大小，颜色是#22629B;

最后设置鼠标放在上面时的变化

#button1:hover{

   background: -webkit-linear-gradient(top,#8DC9EF,#4E9FD1);

    background: -moz-linear-gradient(top,#8DC9EF,#4E9FD1);

   background: linear-gradient(top,#8DC9EF,#4E9FD1);

   background: -ms-linear-gradient(top,#8DC9EF,#4E9FD1);  

}

同样四行是为兼容不同浏览器

完整css代码为

#button1 {

    width: 100px;

    height: 30px;

    font-size: 18px;

    font-family: 微软雅黑;

    letter-spacing: 8px;

    padding-left: 12px;

    border-radius: 5px;

    background: -webkit-linear-gradient(top, #66B5E6, #2e88c0);

    background: -moz-linear-gradient(top, #66B5E6, #2e88c0);

    background: linear-gradient(top, #66B5E6, #2e88c0);

    background: -ms-linear-gradient(top, #66B5E6, #2e88c0);

    border: 1px solid #2576A8;

    box-shadow: 0 1px 2px #B8DCF1 inset, 0 -1px 0 #316F96 inset;

    color: #fff;

    text-shadow: 1px 1px 0.5px #22629B;

}

#button1:hover {

    background: -webkit-linear-gradient(top, #8DC9EF, #4E9FD1);

    background: -moz-linear-gradient(top, #8DC9EF, #4E9FD1);

    background: linear-gradient(top, #8DC9EF, #4E9FD1);

    background: -ms-linear-gradient(top, #8DC9EF, #4E9FD1);

}