字号: - o +

几种超炫的CSS3动画按钮

2012-10-12 前端开发 0人评论 7,248次浏览   

子曰:不懂装懂,永世饭桶 o(∩_∩)o
WopusIDC优惠码:W3Cshare, 点击获取, 或者提交订单时手动输入

设计行业是增长最快的.每天都有新的网站产生,在每一个方向都推动者HTML和CSS的发展,CSS的结构化已经走过了漫长的一段时间,它被用来控制文件的布局和以及不同媒体设备的布局。

为了给设计人员提供更多的灵活性和互操作性,CSS3为其制定了下一个版本的主要修改建议。在本教程中,我们将进行一些很苦的花哨动画的CSS3按钮。

在讲之前,先目睹为快,看一下最终要实现的效果~

点此查看实例展示

第1步:开始HTML

开始的HTML很容易,我们将给a标签给2个类名“button”类和2类不同的颜色,分别为“green”,“red”。

.button {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #FFFFFF;
    padding: 10px 75px;
    margin: 0 20px;
    text-decoration: none;
}

下面是预览效果:

第2步:基本的CSS样式

现在,我们将创建CSS样式。包括按钮的形状和风格。以下是“button”类。

.button {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #FFFFFF;
    padding: 10px 75px;
    margin: 0 20px;
    text-decoration: none;
}

以下是不同颜色的按钮的颜色类。

.green {
    border: solid 1px #3b7200;
    background-color: #88c72a;
}

.red {
    border: solid 1px #720000;
    background-color: #c72a2a;
}

下面是预览:

第3步:CSS3样式

CSS3样式大多领先于正常的CSS样式。我们将提前为领先的属性添加样式如圆角和阴影。要获得如何效果,我们需要针对不同的浏览器使用不同的前缀。

.button {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #FFFFFF;
    padding: 10px 75px;
    margin: 0 20px;
    text-shadow: 2px 2px 1px #595959;
    filter: dropshadow(color=#595959, offx=1, offy=1);
    text-decoration: none;
}

对于不同的按钮形状(如方形,圆形的),我们将使用不同的类。

.square {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.rounded {
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
}

现在,我们的HTML看起来如下:

<a href="#" class="button square green">Button</a>
<a href="#" class="button rounded red">Button</a>

下面是预览:

现在,我们需要添加阴影的造型和不同的CSS3背景渐变的色彩风格。你可以简单地通过改变颜色的CSS背景。

.green {
    border: solid 1px #3b7200;
    background-color: #88c72a;
    background: -moz-linear-gradient(top, #88c72a 0%, #709e0e 100%);
    background: -webkit-linear-gradient(top, #88c72a 0%, #709e0e 100%);
    background: -o-linear-gradient(top, #88c72a 0%, #709e0e 100%);
    background: -ms-linear-gradient(top, #88c72a 0% ,#709e0e 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#709e0e', endColorstr='#709e0e',GradientType=0 );
    background: linear-gradient(top, #88c72a 0% ,#709e0e 100%);
    -webkit-box-shadow: 0px 0px 1px #66FF00, inset 0px 0px 1px #FFFFFF;
    -moz-box-shadow: 0px 0px 1px #66FF00, inset 0px 0px 1px #FFFFFF;
    box-shadow: 0px 0px 1px #66FF00, inset 0px 0px 1px #FFFFFF;
}

.red {
    border: solid 1px #720000;
    background-color: #c72a2a;
    background: -moz-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%);
    background: -webkit-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%);
    background: -o-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%);
    background: -ms-linear-gradient(top, #c72a2a 0% ,#9e0e0e 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9e0e0e', endColorstr='#9e0e0e',GradientType=0 );
    background: linear-gradient(top, #c72a2a 0% ,#9e0e0e 100%);
    -webkit-box-shadow: 0px 0px 1px #FF3300, inset 0px 0px 1px #FFFFFF;
    -moz-box-shadow: 0px 0px 1px #FF3300, inset 0px 0px 1px #FFFFFF;
    box-shadow: 0px 0px 1px #FF3300, inset 0px 0px 1px #FFFFFF;
}

下面是预览:

第4步:按钮悬停和激活状态造型

对于hover和active伪类,我们将编辑颜色和背景梯度设置为不同的颜色类。

.green:hover {
    background-color: #7fb52f;
    background: -moz-linear-gradient(top, #7fb52f 0%, #67910b 100%);
    background: -webkit-linear-gradient(top, #7fb52f 0%, #67910b 100%);
    background: -o-linear-gradient(top, #7fb52f 0%, #67910b 100%);
    background: -ms-linear-gradient(top, #7fb52f 0% ,#67910b 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#67910b', endColorstr='#67910b',GradientType=0 );
    background: linear-gradient(top, #7fb52f 0% ,#67910b 100%);
}

.green:active {
    background-color: #638f22;
    background: -moz-linear-gradient(top, #638f22 0%, #486608 100%);
    background: -webkit-linear-gradient(top, #638f22 0%, #486608 100%);
    background: -o-linear-gradient(top, #638f22 0%, #486608 100%);
    background: -ms-linear-gradient(top, #638f22 0% ,#486608 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#486608', endColorstr='#486608',GradientType=0 );
    background: linear-gradient(top, #638f22 0% ,#486608 100%);
}

.red:hover {
    background-color: #b52f2f;
    background: -moz-linear-gradient(top, #b52f2f 0%, #910b0b 100%);
    background: -webkit-linear-gradient(top, #b52f2f 0%, #910b0b 100%);
    background: -o-linear-gradient(top, #b52f2f 0%, #910b0b 100%);
    background: -ms-linear-gradient(top, #b52f2f 0% ,#910b0b 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#910b0b', endColorstr='#910b0b',GradientType=0 );
    background: linear-gradient(top, #b52f2f 0% ,#910b0b 100%);
}

.red:active {
    background-color: #8f2222;
    background: -moz-linear-gradient(top, #8f2222 0%, #660808 100%);
    background: -webkit-linear-gradient(top, #8f2222 0%, #660808 100%);
    background: -o-linear-gradient(top, #8f2222 0%, #660808 100%);
    background: -ms-linear-gradient(top, #8f2222 0% ,#660808 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#660808', endColorstr='#660808',GradientType=0 );
    background: linear-gradient(top, #8f2222 0% ,#660808 100%);
}

下面是预览:

第5步:CSS3动画造型

现在,有趣的部分开始了,在这里我们将添加样式的按钮效果和动画,使他们能够改变形状。我们将提供的形状变化的影响,包括一些类。我们还添加了造型hover和active状态的形状。

.effect-2 {
    transition: border-radius 2s;
    -webkit-transition: border-radius 2s;
    -moz-transition: border-radius 2s;
    -o-transition: border-radius 2s;
    -ms-transition: border-radius 2s;
}

.effect-2:hover {
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
}

.effect-3 {
    transition: border-radius 1s;
    -webkit-transition: border-radius 1s;
    -moz-transition: border-radius 1s;
    -o-transition: border-radius 1s;
    -ms-transition: border-radius 1s;
}

.effect-3:hover {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

现在,我们的HTML看起来像这样:

<a href="#">Button</a>
<a href="#">Button</a>

这里是预览图:

步骤5:更多的形状

为了创造更多的形状(如在过去,我们创建的类圆形和方形的形状),我们有不同的按钮形状添加更多的类。

.shape-1 {
   -webkit-border-radius: 5px 50px 5px 50px;
    border-radius: 5px 50px 5px 50px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 50px;
    -moz-border-radius-bottomleft: 50px;
    -moz-border-radius-bottomright: 5px;
}

.shape-2 {
    -webkit-border-radius: 50px 5px 50px 5px;
    border-radius: 50px 5px 50px 5px;
    -moz-border-radius-topleft: 50px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 50px;
}
.effect-4 {
    transition: border-radius 1s;
    -webkit-transition: border-radius 1s;
    -moz-transition: border-radius 1s;
    -o-transition: border-radius 1s;
    -ms-transition: border-radius 1s;
}

.effect-4:hover {
    border-radius: 50px 5px 50px 5px;
    -webkit-border-radius: 50px 5px 50px 5px;
    -moz-border-radius-topleft: 50px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 50px;
}

.effect-5 {
    transition: border-radius 1s;
    -webkit-transition: border-radius 1s;
    -moz-transition: border-radius 1s;
    -o-transition: border-radius 1s;
    -ms-transition: border-radius 1s;
}

.effect-5:hover {
    border-radius: 5px 50px 5px 50px;
    -webkit-border-radius: 5px 50px 5px 50px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 50px;
    -moz-border-radius-bottomleft: 50px;
    -moz-border-radius-bottomright: 5px;
}

现在改变这样的HTML:

<a href="#">Button</a>
<a href="#">Button</a>

下面是预览:


以上就是CSS3做出了的几种效果,再看一下演示,或者你也可以自己动手做做,期待你做出更好的效果~

点此查看实例展示

本文作者:两千年的孤寂

2014年的目标:1、入手kp2,多看几本书。2、至少旅游一次。3、带公司走上正轨。少说话,多做事!我不是最好的,但我要做最努力的...... 本站主题交流群:465295619,不闲聊!以后你会知道它的重要性!你懂的~

继续查看有关 的文章

本文密切相关的文章

发表我的评论

*

*

取消