首页 > 代码库 > 用CSS3实现带有阴影效果和颜色渐变的按钮

用CSS3实现带有阴影效果和颜色渐变的按钮

 

  这里讲下如何利用css3里的两个新属性 box-shadow和transition来实现如下所示的带有阴影和颜色渐变效果的按钮(下面这个只是图片;本想直接在这个页面下嵌html的,,试了后发现有些css样式貌似不给用就只能放图片了...=_=):

     技术分享

 

   首先是box-shados语法,用于向框添加一个或多个阴影:

box-shadow: h-shadow v-shadow blur spread color inset;
描述
h-shadow 必须。水平阴影的位置
v-shadow 必须。垂直阴影的位置
blur 可选。模糊距离
spread 可选。阴影尺寸
color 可选。阴影的颜色
insert 可选。将外部阴影改为内部阴影

下面是为按钮设置的位置为0px,1px  模糊距离为5px,颜色为深灰色的css样式

1 <style>
2         .show
3         {
4             box-shadow: 0px 1px 5px #4a4a4a;
5         }
6 </style>

 

 

    然后是transition,通过四个属性来营造过渡效果:

transition: property duration timing-function delay;
描述
transition-property 规定设置过渡效果的css属性的名称
transition-duration 规定完成过渡效果需要多少秒或毫秒
transition-timing-function 规定速度效果的速度曲线
transition-delay 规定过渡效果何时开始

下面是过渡时长为0.3s,过渡函数为ease-out的样式
1 <style>
2         .show
3         {
4             transition: .3s ease-out;
5         }
6 </style>



最后这是最开始时那个按钮效果的全部实现代码:
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 
 7     <style>
 8 
 9         .show
10         {
11             border:none;
12             display:inline-block; /* 行内块 */
13             padding:6px 16px;
14             color:white;
15             background-color: #F88E8B;
16             text-align: center;
17             vertical-align: middle;
18             margin-left:50px;
19             transition: .3s ease-out;
20             cursor: pointer; /* 获得焦点时改变指针样式 */
21             box-shadow: 0px 1px 5px #4a4a4a;
22         }
23         p.show a:link,p.show a:visited
24         {
25             text-decoration: none;
26             color:white;
27         }
28         p.show:hover
29         {
30             text-decoration: none;
31             color:white;
32             background-color: #F45551;
33         }
34 
35     </style>
36 
37 </head>
38 <body>
39 
40 <div>
41     <p class="show">
42         <a href="#">点击这里</a>
43     </p>
44 </div>
45 
46 </body>
47 </html>

 

 
 

用CSS3实现带有阴影效果和颜色渐变的按钮