当前位置:首页 > 网站应用 > 正文内容

彩色渐变的圆角按钮UI特效

cjw1231年前 (2023-10-21)网站应用2200

收藏的11种彩色渐变按钮悬停动画,Css3圆角按钮渐变色动画特效。

<style>
.btn-hover{width: 200px;font-size:16px;font-weight:600;color:#fff;cursor: pointer;margin: 20px;height: 55px;text-align:center;border: none;background-size: 300% 100%;border-radius: 50px;moz-transition: all .4s ease-in-out;-o-transition: all .4s ease-in-out;-webkit-transition: all .4s ease-in-out;transition: all .4s ease-in-out;}
.btn-hover:hover{background-position: 100% 0;moz-transition: all .4s ease-in-out;-o-transition: all .4s ease-in-out;-webkit-transition: all .4s ease-in-out;transition: all .4s ease-in-out;}
.btn-hover:focus {outline: none;}
.btn-hover.color-1{background-image: linear-gradient(to right, #25aae1, #40e495, #30dd8a, #2bb673);box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);}
.btn-hover.color-2 {background-image: linear-gradient(to right, #f5ce62, #e43603, #fa7199, #e85a19);box-shadow: 0 4px 15px 0 rgba(229, 66, 10, 0.75);}
.btn-hover.color-3 {background-image: linear-gradient(to right, #667eea, #764ba2, #6B8DD6, #8E37D7);box-shadow: 0 4px 15px 0 rgba(116, 79, 168, 0.75); }
.btn-hover.color-4 {background-image: linear-gradient(to right, #fc6076, #ff9a44, #ef9d43, #e75516);box-shadow: 0 4px 15px 0 rgba(252, 104, 110, 0.75);}
.btn-hover.color-5 {background-image: linear-gradient(to right, #0ba360, #3cba92, #30dd8a, #2bb673);box-shadow: 0 4px 15px 0 rgba(23, 168, 108, 0.75);}
.btn-hover.color-6 {background-image: linear-gradient(to right, #009245, #FCEE21, #00A8C5, #D9E021);box-shadow: 0 4px 15px 0 rgba(83, 176, 57, 0.75); }
.btn-hover.color-7 {background-image: linear-gradient(to right, #6253e1, #852D91, #A3A1FF, #F24645);box-shadow: 0 4px 15px 0 rgba(126, 52, 161, 0.75);}
.btn-hover.color-8 {background-image: linear-gradient(to right, #29323c, #485563, #2b5876, #4e4376);box-shadow: 0 4px 15px 0 rgba(45, 54, 65, 0.75);}
.btn-hover.color-9 {background-image: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);box-shadow: 0 4px 15px 0 rgba(65, 132, 234, 0.75);}
.btn-hover.color-10 {background-image: linear-gradient(to right, #ed6ea0, #ec8c69, #f7186a, #FBB03B);box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);}
.btn-hover.color-11 {background-image: linear-gradient(to right, #eb3941, #f15e64, #e14e53, #e2373f);box-shadow: 0 5px 15px rgba(242, 97, 103, .4);}
</style>
<div class="buttons"><button class="btn-hover color-1">BUTTON</button>
<button class="btn-hover color-2">BUTTON</button>
<button class="btn-hover color-3">BUTTON</button>
<button class="btn-hover color-4">BUTTON</button>
<button class="btn-hover color-5">BUTTON</button>
<button class="btn-hover color-6">BUTTON</button>
<button class="btn-hover color-7">BUTTON</button>
<button class="btn-hover color-8">BUTTON</button>
<button class="btn-hover color-9">BUTTON</button>
<button class="btn-hover color-10">BUTTON</button>
<button class="btn-hover color-11">BUTTON</button>
</div>


扫描二维码推送至手机访问。

版权声明:本文由追求完美发布,如需转载请注明出处。

本文链接:https://cjw123.com/blog/?id=14

分享给朋友:

相关文章

网站调整公告

        网站开通了也有三年多了,网站也进行了多次的改版,昨天是我生日嫌着没事在家里把网站再进行了一次改版,当大家再次访问网站时,网站已经换上了全新的衣裳,这次的改版也将意味着我自己也会以一个全新的面貌展现,在我过去的一岁里...

html meta标签屏蔽搜索引擎的用法

html页面中的 meta 标签可以用来识别搜索引擎的蜘蛛类型,可以规定meta标签所在的html页面是否被蜘蛛抓取,下面是这个meta标签的用法,大家可以借鉴一下。搜索引擎的 meta 标签的解析下面是meta标签对搜索引擎的解析<meta name='robot...

仿win10系统蓝屏的404页面

<!doctype html>     <html>     <head>     <meta charset=...

彩色流转文字代码

根据自己需求修改代码,点击运行预览效果!<style>     #nr{font-size:15px; margin: 0;background: -webkit-linear-gradient(left,#ffff...

js打印文字打字输出特效代码

<center> <style type="text/css"> .a{background:#666666; border:0px solid #000000; width:300px; h...

兼容的HTML5的网页圆角提示框

<!doctype html><html><head><meta charset="utf-8"> <title>纯css的圆角提示框全兼容_www.youkud.com</title>...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。