文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

怎么用纯CSS3实现动画按钮效果

2024-04-02 19:55

关注

这篇文章主要介绍了怎么用纯CSS3实现动画按钮效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

HTML代码:

<div class="button01">

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

      <p class="top">click to begin</p>

      <p class="bottom">1.2MB .zip</p>

</div>

CSS代码:

.button01 {

  width: 200px;

  margin: 50px auto 20px auto;

}

.button01 a {

  display: block;

  height: 50px;

  width: 200px;

 

  color: white;

  font: 17px/50px Helvetica, Verdana, sans-serif;

  text-decoration: none;

  text-align: center;

  text-transform: uppercase;

   

  background: #00b7ea;

  background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%);

  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3));

  background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%);

  background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%);

  background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%);

  background: linear-gradient(top, #00b7ea 0%,#009ec3 100%);

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 );

}

.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;

 

  text-align: center;

  font: 12px/45px Helvetica, Verdana, sans-serif;

  color: #fff;

 

  position: absolute;

  z-index: -1;

   

  -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;

}

.button01:hover .bottom {

  margin: -10px 0 0 10px;

}

.button01:hover .top {

  margin: -80px 0 0 10px;

  line-height: 35px;

}

.button01 a:active {

 background: #00b7ea;

 background: -moz-linear-gradient(top,  #00b7ea 36%, #009ec3 100%);

 background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3));

 background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%);

 background: -o-linear-gradient(top,  #00b7ea 36%,#009ec3 100%);

 background: -ms-linear-gradient(top,  #00b7ea 36%,#009ec3 100%);

 background: linear-gradient(top,  #00b7ea 36%,#009ec3 100%);

 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 );

}

.button01:active .bottom {

  margin: -20px 0 0 10px;

}

.button01:active .top {

  margin: -70px 0 0 10px;

}

感谢你能够认真阅读完这篇文章,希望小编分享的“怎么用纯CSS3实现动画按钮效果”这篇文章对大家有帮助,同时也希望大家多多支持编程网,关注编程网行业资讯频道,更多相关知识等着你来学习!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯