以前制作圆角的渐变按钮,必须使用背景图片,不过有了css3技术,这些效果完全能用几行代码实现,不过请注意,这些代码是不支持旧版本的浏览器的,请在最新版的高级浏览器中浏览本示例页面。

预览效果

css代码

.graybtn {

    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;

    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;

    box-shadow:inset 0px 1px 0px 0px #ffffff;

    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #d1d1d1) );

    background:-moz-linear-gradient( center top, #ffffff 5%, #d1d1d1 100% );

    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d1d1d1');

    background-color:#ffffff;

    -moz-border-radius:6px;

    -webkit-border-radius:6px;

    border-radius:6px;

    border:1px solid #dcdcdc;

    display:inline-block;

    color:#777777;

    font-family:arial;

    font-size:15px;

    font-weight:bold;

    padding:6px 24px;

    text-decoration:none;

    text-shadow:1px 1px 0px #ffffff;

}

.graybtn:hover {

    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d1d1d1), color-stop(1, #ffffff) );

    background:-moz-linear-gradient( center top, #d1d1d1 5%, #ffffff 100% );

    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1d1d1', endColorstr='#ffffff');

    background-color:#d1d1d1;

}

.graybtn:active {

    position:relative;

    top:1px;

}

html代码

<a href="#" class="graybtn">button</a>

转载请注明:文章转载自:问说 » 纯CSS制作灰色渐变的圆角按钮