运用CSS3创建一个旋转可变色按钮-HTML教程-爱易网页

日期：2014-05-17　浏览次数：20548 次

使用CSS3创建一个旋转可变色按钮

想把访客引到另一个页面?添加一个很炫的按钮是个很好的办法 !今天的文章提出了如何使用CSS3创建一个旋转,旋转,可变色按钮。

这是一个演示旋转的CSS3按钮。让我们先从HTML:

和现在的CSS:

.button

{

background:#aaa;

color:#555;

font-weight:bold;

font-size:15px;

padding:10px 15px;

border:none;

margin:50px;

cursor:pointer;

-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s;

-o-transition-property:width,height,-o-transform,background,font-size,opacity,color;

-o-transition-duration:1s,1s,1s,1s,1s,1s,1s;

-moz-transition-property:width, height, -moz-transform, background, font-size, opacity, color;

-moz-transition-duration:1s,1s,1s,1s,1s,1s,1s;

transition-property:width,height,transform,background,font-size,opacity;

transition-duration:1s,1s,1s,1s,1s,1s;

-webkit-border-radius:5px;

border-radius:5px;

box-shadow:0 0 2px rgba(0,0,0,0.5);

text-shadow:0 0 5px rgba(255,255,255,0.5);

display:inline-block; /*它是重要为按钮旋转*/

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。