CSS3 Gradient按钮demo

来源：互联网发布：人人商城源码编辑：程序博客网时间：2024/05/20 20:45
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>CSS3 Gradient</title><style type="text/css">a{text-decoration:none;color:#63BDA8;}.button {    border: 1px solid #e9e9e9;    border-radius: 3px;    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);    font-weight: bold;    text-align: center;    -moz-text-shadow: 1px 1px 0 #fff;    -webkit-text-shadow: 1px 1px 0 #fff;    text-shadow: 1px 1px 0 #fff;    white-space: nowrap;    display: block;    font-size: 22px;    margin: 2em auto;    padding: 9px 0 10px;    width: 340px;    background: #EFEFEF;    background: -moz-linear-gradient(top,#F7F7F7 0,#DFDFDF 100%);    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#F7F7F7),color-stop(100%,#DFDFDF));    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#dfdfdf',GradientType=0 );}.button:hover {    border-color: #63BDA8;    color: #fff;    font-weight: normal;    text-decoration: none;    -moz-text-shadow: none;    -webkit-text-shadow: none;    text-shadow: none;    background: #95D9C8;    background: -moz-linear-gradient(top,#95D9C8 0,#63C8B8 100%);    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#95D9C8),color-stop(100%,#63C8B8));    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#95D9C8',endColorstr='#63C8B8',GradientType=0);}</style></head><body><a href="#quick-start" class="button">        <span class="extra">Gradient 按钮</span>    </a></body></html>
0 0