5种漂亮的纯CSS3动画按钮特效

这次我们要来分享一款很不错的CSS3按钮动画，这款CSS3按钮一共有5种动画方式，每一种都是鼠标滑过动画形式，虽然这些动画按钮不是十分华丽，但是小编觉得不像其他按钮那样很难扩展，我们可以修改CSS代码随意改变自己喜欢的颜色样式。

在线预览   源码下载

实现的代码。

html代码：

<!--button01-->
<div class="button01">
      <a href="#">Download</a>
      <p class="top">click to begin</p>
      <p class="bottom">1.2MB .zip</p>
    </div>
<!--button01-->  

<!--button--02-->
<div class="button02"><a class="box">My box with glow</a></div>
<!--end button02-->

<!--button03-->
<div id="menu">
    <ul>
        <li><a href="#">Home</a><a href="#">See Us</a></li>
        <li><a href="#">About</a><a href="#">Meet Us</a></li>
        <li><a href="#">Contact</a><a href="#">Email Us</a></li>
    </ul>
</div>
<!--end button03-->

<!--button04-->
<div id="main">

<ul id="navigationMenu">
    <li>
        <a class="home" href="#">
            <span>Home</span>
        </a>
    </li>

    <li>
        <a class="about" href="#">
            <span>About</span>
        </a>
    </li>

    <li>
         <a class="services" href="#">
            <span>Services</span>
         </a>
    </li>

    <li>
        <a class="portfolio" href="#">
            <span>Portfolio</span>
        </a>
    </li>

    <li>
        <a class="contact" href="#">
            <span>Contact us</span>
        </a>
    </li>
</ul>

</div>
<!---end button04-->

<!---button05-->
<div id="container">
    <a href="#nogo" class="button05">Login ?</a>
    <a href="#nogo" class="button05">Register ♥</a>
</div>
<!---end button05-->

css3代码：

* {
    padding: 0;
    margin: 0;
}
a{
    transition-duration:0.4s, 0.5s;
    transition-property:background-color, color;
    transition-timing-function:ease, ease;
}
body{font-family:Arial;}

/*********************************button 01********************************/
.button01 {
  width: 200px;
  margin: 50px auto 20px auto;
}

.button01 a {
  display: block;
  height: 50px;
  width: 200px;

  /*TYPE*/
  color: white;
  font: 17px/50px Helvetica, Verdana, sans-serif;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;

  /*GRADIENT*/
  background: #00b7ea; /* Old browsers */
  background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */
  background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=‘#00b7ea‘, endColorstr=‘#009ec3‘,GradientType=0 ); /* IE6-9 */
}

.button01 a, p {
    -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;

  -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}

p {
  background: #222;
  display: block;
  height: 40px;
  width: 180px;
  margin: -50px 0 0 10px;

  /*TYPE*/
  text-align: center;
  font: 12px/45px Helvetica, Verdana, sans-serif;
  color: #fff;

  /*POSITION*/
  position: absolute;
  z-index: -1;

  /*TRANSITION*/
  -webkit-transition: margin 0.5s ease;
     -moz-transition: margin 0.5s ease;
       -o-transition: margin 0.5s ease;
      -ms-transition: margin 0.5s ease;
          transition: margin 0.5s ease;
}

/*HOVER*/
.button01:hover .bottom {
  margin: -10px 0 0 10px;
}

.button01:hover .top {
  margin: -80px 0 0 10px;
  line-height: 35px;
}

/*ACTIVE*/
.button01 a:active {
      background: #00b7ea; /* Old browsers */
      background: -moz-linear-gradient(top,  #00b7ea 36%, #009ec3 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */
      background: -ms-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* IE10+ */
      background: linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* W3C */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=‘#00b7ea‘, endColorstr=‘#009ec3‘,GradientType=0 ); /* IE6-9 */

}

.button01:active .bottom {
  margin: -20px 0 0 10px;
}

.button01:active .top {
  margin: -70px 0 0 10px;
}
/*****************************button 01**********************************/
/*****************************button 02*****************************/
div.button02{

    color: #333;
    font-size: 12px;
    line-height: 1.64;
    margin:0 auto ;
}
.box {
    background: #1c1c1c;
    color: #0099ff;
    cursor: pointer;
    display: block;
    margin: 40px auto;
    padding: 20px;
    text-align: center;
    width: 150px;
    transition:all 1s ease-out;
    -webkit-transition: -webkit-box-shadow 0.5s ease-out;
    -moz-transition: -moz-box-shadow 0.5s ease-out;
    -o-transition: box-shadow 0.5s ease-out;
}
.box:hover {
    -moz-box-shadow: 0px 0px 15px #0099ff;
    -webkit-box-shadow: 0px 0px 15px #0099ff;
     box-shadow: 0px 0px 15px #0099ff;
}
a:hover {
    color: #0088CC;
    text-decoration: underline;
}
/*********************************end  button02***********************/

/*********************************button03***********************************/

#menu {
    height: 100px; width: 630px;
    overflow: hidden;
    margin: 40px auto;
    text-align: center;
}

#menu ul li {
    float: left;
    margin: 0 5px;
    list-style-type: none;
}

/* Menu Link Styles */
#menu ul a {
    display: block;
    background: #e70f23; color: #fff;
    height: 100px; width: 200px;
    font: lighter 2em/100px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    text-decoration: none;

    -webkit-transition: margin .4s ease-in-out;
    -moz-transition: margin .4s ease-in-out;
    -o-transition: margin .4s ease-in-out;
    -ms-transition: margin .4s ease-in-out;
    transition: margin .4s ease-in-out;
}

/* Secondary Link Styles */
#menu ul a:nth-of-type(even) {
    background: #000;
    color: white;
}

/* Hover Slide */
#menu ul li:hover :first-child {
    margin-top: -100px;
}
/***********************************end button03***********************************/

/***********************************button04***********************************/
#navigationMenu li{
    list-style:none;
    height:39px;
    padding:2px;
    width:40px;
}

#navigationMenu span{
    /* Container properties */
    width:0;
    left:38px;
    padding:0;
    position:absolute;
    overflow:hidden;

    /* Text properties */
    font-family:‘Myriad Pro‘,Arial, Helvetica, sans-serif;
    font-size:18px;
    font-weight:bold;
    letter-spacing:0.6px;
    white-space:nowrap;
    line-height:39px;

    /* CSS3 Transition: */
    -webkit-transition: 0.25s;
    /*-o-transition: 0.25s;*/

    /* Future proofing (these do not work yet): */
    -moz-transition: 0.25s;
    transition: 0.25s;
}

#navigationMenu a{
    background:#C30;

    height:39px;
    width:38px;
    display:block;
    position:relative;
}

/* General hover styles */

#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
    text-decoration:none;

    /* CSS outer glow with the box-shadow property */
    -moz-box-shadow:0 0 5px #9ddff5;
    -webkit-box-shadow:0 0 5px #9ddff5;
    box-shadow:0 0 5px #9ddff5;
}

/* Green Button */

#navigationMenu .home {}
#navigationMenu .home:hover {    background-position:0 -39px;}
#navigationMenu .home span{
    background-color:#7da315;
    color:#3d4f0c;
    text-shadow:1px 1px 0 #99bf31;
}

/* Blue Button */

#navigationMenu .about { }
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
    background-color:#1e8bb4;
    color:#223a44;
    text-shadow:1px 1px 0 #44a8d0;
}

/* Orange Button */

#navigationMenu .services { }
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
    background-color:#c86c1f;
    color:#5a3517;
    text-shadow:1px 1px 0 #d28344;
}

/* Yellow Button */

#navigationMenu .portfolio {}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
    background-color:#d0a525;
    color:#604e18;
    text-shadow:1px 1px 0 #d8b54b;
}

/* Purple Button */

#navigationMenu .contact { }
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
    background-color:#af1e83;
    color:#460f35;
    text-shadow:1px 1px 0 #d244a6;
}

/* The styles below are only needed for the demo page */

#main{
    margin:40px auto;
    position:relative;
    width:40px;
}

/***********************end button04***************************/

/***********************button05*****************************/
#container {
    width: 450px;
    margin:40px auto;
}

.button05 {
    position: relative;
    display: inline-block;

    min-width: 150px;
    padding: 10px 15px;
    margin: 0px 10px;

    background-color: #3E9ED6;
    background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, rgb(112,181,242)),
        color-stop(0.49, rgb(84,164,238)),
        color-stop(0.5, rgb(54,144,240)),
        color-stop(1, rgb(26,97,219))
    );
    background-image: -moz-linear-gradient(
        center top,
        rgb(112,181,242) 0%,
        rgb(84,164,238) 49%,
        rgb(54,144,240) 50%,
        rgb(26,97,219) 100%
    );

    color: #fff;
    font-weight: bold;
    font-size: 24px;
    text-decoration: none;
    text-align: center;
    line-height: 1;
    text-shadow: 0px -1px 0px rgba(0,0,0,0.5);

    border: 1px solid;
    border-color: #2f71a3 #265a82 #1e4766 #265a82;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;

    box-shadow:         inset 0px -4px 5px rgba(255,255,255,0.2),
                        inset 0px 1px 5px rgba(255,255,255,0.2),
                        /**/
                        0px 2px 0px #1e4766,
                        0px 4px 0px #1e4766,
                        0px 6px 0px #1e4766,
                        /**/
                        0px 8px 5px rgba(0,0,0,0.5);

    -moz-box-shadow:     inset 0px -4px 5px rgba(255,255,255,0.2),
                        inset 0px 1px 5px rgba(255,255,255,0.2),
                        /**/
                        0px 2px 0px #1e4766,
                        0px 4px 0px #1e4766,
                        0px 6px 0px #1e4766,
                        /**/
                        0px 8px 5px rgba(0,0,0,0.5);

    -webkit-box-shadow: inset 0px -4px 5px rgba(255,255,255,0.2),
                        inset 0px 1px 5px rgba(255,255,255,0.2),
                        /**/
                        0px 2px 0px #1e4766,
                        0px 4px 0px #1e4766,
                        0px 6px 0px #1e4766,
                        /**/
                        0px 8px 5px rgba(0,0,0,0.5);
}

.button05:hover {
    background-color: #8AC5FD;

    background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, rgb(134,193,253)),
        color-stop(0.49, rgb(153,213,255)),
        color-stop(0.5, rgb(130,194,253)),
        color-stop(1, rgb(108,170,229))
    );
    background-image: -moz-linear-gradient(
        center top,
        rgb(134,193,253) 0%,
        rgb(153,213,255) 49%,
        rgb(130,194,253) 50%,
        rgb(108,170,229) 100%
    );
}

.button05:active {
    top: 4px;
    box-shadow:         inset 0px 4px 5px rgba(255,255,255,0.4),
                        inset 0px -1px 5px rgba(255,255,255,0.2),
                        /**/
                        0px 2px 0px #1e4766,
                        /**/
                        0px 4px 5px rgba(0,0,0,0.5);

    -moz-box-shadow:     inset 0px 4px 5px rgba(255,255,255,0.4),
                        inset 0px -1px 5px rgba(255,255,255,0.2),
                        /**/
                        0px 2px 0px #1e4766,
                        /**/
                        0px 4px 5px rgba(0,0,0,0.5);

    -webkit-box-shadow: inset 0px 4px 5px rgba(255,255,255,0.4),
                        inset 0px -1px 5px rgba(255,255,255,0.2),
                        /**/
                        0px 2px 0px #1e4766,
                        /**/
                        0px 4px 5px rgba(0,0,0,0.5);
}

/***********************end button05*****************************/

via:http://www.w2bc.com/Article/11384

时间： 2024-10-11 22:03:38

5种漂亮的纯CSS3动画按钮特效的相关文章

纯CSS3动画按钮效果 5种漂亮样式DEMO演示

Come in ! click to begin You'll get a lot ! My box with glow HomeSee Us AboutMeet Us ContactEmail Us Home About Services Portfolio Contact us Login ? Register ? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w

纯CSS3动画按钮效果 5种漂亮样式

这次我们要来分享一款很不错的CSS3按钮动画,这款CSS3按钮一共有5种动画方式,每一种都是鼠标滑过动画形式,虽然这些动画按钮不是十分华丽,但是小编觉得不像其他按钮那样很难扩展,我们可以修改CSS代码随意改变自己喜欢的颜色样式. 在线演示源码下载 让我们一起来看看实现这5中样式动画按钮的HTML代码和CSS代码吧.以第一个按钮为例,其他按钮的代码大家可以下载源代码来研究,并不是很难. HTML代码: <div class="button01"> <a href=&qu

8个超震撼的HTML5和纯CSS3动画源码

HTML5和CSS3之所以强大,不仅因为现在大量的浏览器的支持,更是因为它们已经越来越能满足现代开发的需要.Flash在几年之后肯定会消亡,那么HTML5和CSS3将会替代Flash.今天我们要给大家分享8个最新的HTML5和纯CSS3动画及其源码,这些动画非常让人震撼,你也可以学习一下HTML5源码. 1.HTML5 Canvas水波纹动画特效 HTML5的Canvas特性非常实用,我们不仅可以在Canvas画布上绘制各种图形,也可以制作绚丽的动画,比如这次介绍的水波纹动画特效.以前我们也分享

基于jQuery点击加载动画按钮特效

分享一款基于jQuery点击加载动画按钮特效.这是一款基于jQuery+CSS3实现的鼠标点击按钮加载动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3 text-center"> <p> <button c

10个强大的纯CSS3动画案例分享

我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式.CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互.本文分享了10个非常炫酷的CSS3动画案例,希望大家喜欢.  http://c.tieba.baidu.com/p/3473192107 1.纯CSS3实现烧烤动画 http://c.tieba.baidu.com/p/3473192107 这个CSS3动画相当有创意,动画中所有的烧烤元素都是利用CSS3绘制而

纯CSS3实现3D特效的iPhone 6动画

iPhone 6发布不久,屌丝怎能买得起,不过作为程序员,今天看到一个用纯CSS3绘制的iPhone 6,由于CSS3特性的运用,带有点3D的动画特效,大家可以先来看看在线演示效果. 在线演示        源码下载 HTML结构代码如下: <div id="wrapper"> <div id="iphone"> <div id="side"></div> <div id="line

纯CSS3动画实现小黄人

先上效果: http://2.danielcv.sinaapp.com/sae/minimon/index.html 要实现这个效果其实并不难,主要是对一些CSS3特性的实质性应用,比如transform,transition还有relative,absolute定位的使用方法, 在搭建好 <div class="wrapper"> <div class="littleH"> <div class="bodyH"&g

纯css3实现按钮的 hover 和 active 时颜色的明暗变化效果

效果:在任意HTML标签上增加样式类 f-color-control 就可以为此元素增加hover和avtive时颜色的变化; 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .btn{ width: 80px; line-height:

最新的css3动画按钮效果

效果演示     插件下载