HTML代码：

<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="css/new_file.css"/></head><body><header><link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet"></header><h1>Animation Buttons</h1><p>Hover us and enjoy the satisfying neumorphic animation designs!</p><div class="frame"><button class="custom-btn btn-1">Read More</button><button class="custom-btn btn-2">Read More</button><button class="custom-btn btn-3"><span>Read More</span></button><button class="custom-btn btn-4"><span>Read More</span></button><button class="custom-btn btn-5"><span>Read More</span></button><button class="custom-btn btn-6"><span>Read More</span></button><button class="custom-btn btn-7"><span>Read More</span></button><button class="custom-btn btn-8"><span>Read More</span></button><button class="custom-btn btn-9">Read More</button><button class="custom-btn btn-10">Read More</button><button class="custom-btn btn-11">Read More<div class="dot"></div></button><button class="custom-btn btn-12"><span>Click!</span><span>Read More</span></button><button class="custom-btn btn-13">Read More</button><button class="custom-btn btn-14">Read More</button><button class="custom-btn btn-15">Read More</button><button class="custom-btn btn-16">Read More</button><p style="font-family: Andale Mono, monospace;">CANDY.BUTTON</p></div></body>
</html>

CSS代码：

body {background: #e0e5ec;
}
h1 {position: relative;text-align: center;color: #353535;font-size: 50px;font-family: "Cormorant Garamond", serif;
}p {font-family: 'Lato', sans-serif;font-weight: 300;text-align: center;font-size: 18px;color: #676767;
}
.frame {width: 90%;margin: 40px auto;text-align: center;
}
button {margin: 20px;
}
.custom-btn {width: 130px;height: 40px;color: #fff;border-radius: 5px;padding: 10px 25px;font-family: 'Lato', sans-serif;font-weight: 500;background: transparent;cursor: pointer;transition: all 0.3s ease;position: relative;display: inline-block;box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),7px 7px 20px 0px rgba(0,0,0,.1),4px 4px 5px 0px rgba(0,0,0,.1);outline: none;
}/* 1 */
.btn-1 {background: rgb(6,14,131);background: linear-gradient(0deg, rgba(6,14,131,1) 0%, rgba(12,25,180,1) 100%);border: none;
}
.btn-1:hover {background: rgb(0,3,255);
background: linear-gradient(0deg, rgba(0,3,255,1) 0%, rgba(2,126,251,1) 100%);
}/* 2 */
.btn-2 {background: rgb(96,9,240);background: linear-gradient(0deg, rgba(96,9,240,1) 0%, rgba(129,5,240,1) 100%);border: none;}
.btn-2:before {height: 0%;width: 2px;
}
.btn-2:hover {box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),-4px -4px 6px 0 rgba(116, 125, 136, .5), inset -4px -4px 6px 0 rgba(255,255,255,.2),inset 4px 4px 6px 0 rgba(0, 0, 0, .4);
}/* 3 */
.btn-3 {background: rgb(0,172,238);
background: linear-gradient(0deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%);width: 130px;height: 40px;line-height: 42px;padding: 0;border: none;}
.btn-3 span {position: relative;display: block;width: 100%;height: 100%;
}
.btn-3:before,
.btn-3:after {position: absolute;content: "";right: 0;top: 0;background: rgba(2,126,251,1);transition: all 0.3s ease;
}
.btn-3:before {height: 0%;width: 2px;
}
.btn-3:after {width: 0%;height: 2px;
}
.btn-3:hover{background: transparent;box-shadow: none;
}
.btn-3:hover:before {height: 100%;
}
.btn-3:hover:after {width: 100%;
}
.btn-3 span:hover{color: rgba(2,126,251,1);
}
.btn-3 span:before,
.btn-3 span:after {position: absolute;content: "";left: 0;bottom: 0;background: rgba(2,126,251,1);transition: all 0.3s ease;
}
.btn-3 span:before {width: 2px;height: 0%;
}
.btn-3 span:after {width: 0%;height: 2px;
}
.btn-3 span:hover:before {height: 100%;
}
.btn-3 span:hover:after {width: 100%;
}/* 4 */
.btn-4 {background-color: #4dccc6;
background-image: linear-gradient(315deg, #4dccc6 0%, #96e4df 74%);line-height: 42px;padding: 0;border: none;
}
.btn-4:hover{background-color: #89d8d3;
background-image: linear-gradient(315deg, #89d8d3 0%, #03c8a8 74%);
}
.btn-4 span {position: relative;display: block;width: 100%;height: 100%;
}
.btn-4:before,
.btn-4:after {position: absolute;content: "";right: 0;top: 0;box-shadow:  4px 4px 6px 0 rgba(255,255,255,.9),-4px -4px 6px 0 rgba(116, 125, 136, .2), inset -4px -4px 6px 0 rgba(255,255,255,.9),inset 4px 4px 6px 0 rgba(116, 125, 136, .3);transition: all 0.3s ease;
}
.btn-4:before {height: 0%;width: .1px;
}
.btn-4:after {width: 0%;height: .1px;
}
.btn-4:hover:before {height: 100%;
}
.btn-4:hover:after {width: 100%;
}
.btn-4 span:before,
.btn-4 span:after {position: absolute;content: "";left: 0;bottom: 0;box-shadow:  4px 4px 6px 0 rgba(255,255,255,.9),-4px -4px 6px 0 rgba(116, 125, 136, .2), inset -4px -4px 6px 0 rgba(255,255,255,.9),inset 4px 4px 6px 0 rgba(116, 125, 136, .3);transition: all 0.3s ease;
}
.btn-4 span:before {width: .1px;height: 0%;
}
.btn-4 span:after {width: 0%;height: .1px;
}
.btn-4 span:hover:before {height: 100%;
}
.btn-4 span:hover:after {width: 100%;
}/* 5 */
.btn-5 {width: 130px;height: 40px;line-height: 42px;padding: 0;border: none;background: rgb(255,27,0);
background: linear-gradient(0deg, rgba(255,27,0,1) 0%, rgba(251,75,2,1) 100%);
}
.btn-5:hover {color: #f0094a;background: transparent;box-shadow:none;
}
.btn-5:before,
.btn-5:after{content:'';position:absolute;top:0;right:0;height:2px;width:0;background: #f0094a;box-shadow:-1px -1px 5px 0px #fff,7px 7px 20px 0px #0003,4px 4px 5px 0px #0002;transition:400ms ease all;
}
.btn-5:after{right:inherit;top:inherit;left:0;bottom:0;
}
.btn-5:hover:before,
.btn-5:hover:after{width:100%;transition:800ms ease all;
}/* 6 */
.btn-6 {background: rgb(247,150,192);
background: radial-gradient(circle, rgba(247,150,192,1) 0%, rgba(118,174,241,1) 100%);line-height: 42px;padding: 0;border: none;
}
.btn-6 span {position: relative;display: block;width: 100%;height: 100%;
}
.btn-6:before,
.btn-6:after {position: absolute;content: "";height: 0%;width: 1px;box-shadow:-1px -1px 20px 0px rgba(255,255,255,1),-4px -4px 5px 0px rgba(255,255,255,1),7px 7px 20px 0px rgba(0,0,0,.4),4px 4px 5px 0px rgba(0,0,0,.3);
}
.btn-6:before {right: 0;top: 0;transition: all 500ms ease;
}
.btn-6:after {left: 0;bottom: 0;transition: all 500ms ease;
}
.btn-6:hover{background: transparent;color: #76aef1;box-shadow: none;
}
.btn-6:hover:before {transition: all 500ms ease;height: 100%;
}
.btn-6:hover:after {transition: all 500ms ease;height: 100%;
}
.btn-6 span:before,
.btn-6 span:after {position: absolute;content: "";box-shadow:-1px -1px 20px 0px rgba(255,255,255,1),-4px -4px 5px 0px rgba(255,255,255,1),7px 7px 20px 0px rgba(0,0,0,.4),4px 4px 5px 0px rgba(0,0,0,.3);
}
.btn-6 span:before {left: 0;top: 0;width: 0%;height: .5px;transition: all 500ms ease;
}
.btn-6 span:after {right: 0;bottom: 0;width: 0%;height: .5px;transition: all 500ms ease;
}
.btn-6 span:hover:before {width: 100%;
}
.btn-6 span:hover:after {width: 100%;
}/* 7 */
.btn-7 {
background: linear-gradient(0deg, rgba(255,151,0,1) 0%, rgba(251,75,2,1) 100%);line-height: 42px;padding: 0;border: none;
}
.btn-7 span {position: relative;display: block;width: 100%;height: 100%;
}
.btn-7:before,
.btn-7:after {position: absolute;content: "";right: 0;bottom: 0;background: rgba(251,75,2,1);box-shadow:-7px -7px 20px 0px rgba(255,255,255,.9),-4px -4px 5px 0px rgba(255,255,255,.9),7px 7px 20px 0px rgba(0,0,0,.2),4px 4px 5px 0px rgba(0,0,0,.3);transition: all 0.3s ease;
}
.btn-7:before{height: 0%;width: 2px;
}
.btn-7:after {width: 0%;height: 2px;
}
.btn-7:hover{color: rgba(251,75,2,1);background: transparent;
}
.btn-7:hover:before {height: 100%;
}
.btn-7:hover:after {width: 100%;
}
.btn-7 span:before,
.btn-7 span:after {position: absolute;content: "";left: 0;top: 0;background: rgba(251,75,2,1);box-shadow:-7px -7px 20px 0px rgba(255,255,255,.9),-4px -4px 5px 0px rgba(255,255,255,.9),7px 7px 20px 0px rgba(0,0,0,.2),4px 4px 5px 0px rgba(0,0,0,.3);transition: all 0.3s ease;
}
.btn-7 span:before {width: 2px;height: 0%;
}
.btn-7 span:after {height: 2px;width: 0%;
}
.btn-7 span:hover:before {height: 100%;
}
.btn-7 span:hover:after {width: 100%;
}/* 8 */
.btn-8 {background-color: #f0ecfc;
background-image: linear-gradient(315deg, #f0ecfc 0%, #c797eb 74%);line-height: 42px;padding: 0;border: none;
}
.btn-8 span {position: relative;display: block;width: 100%;height: 100%;
}
.btn-8:before,
.btn-8:after {position: absolute;content: "";right: 0;bottom: 0;background: #c797eb;/*box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),-4px -4px 6px 0 rgba(116, 125, 136, .2), inset -4px -4px 6px 0 rgba(255,255,255,.5),inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/transition: all 0.3s ease;
}
.btn-8:before{height: 0%;width: 2px;
}
.btn-8:after {width: 0%;height: 2px;
}
.btn-8:hover:before {height: 100%;
}
.btn-8:hover:after {width: 100%;
}
.btn-8:hover{background: transparent;
}
.btn-8 span:hover{color: #c797eb;
}
.btn-8 span:before,
.btn-8 span:after {position: absolute;content: "";left: 0;top: 0;background: #c797eb;/*box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),-4px -4px 6px 0 rgba(116, 125, 136, .2), inset -4px -4px 6px 0 rgba(255,255,255,.5),inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/transition: all 0.3s ease;
}
.btn-8 span:before {width: 2px;height: 0%;
}
.btn-8 span:after {height: 2px;width: 0%;
}
.btn-8 span:hover:before {height: 100%;
}
.btn-8 span:hover:after {width: 100%;
}/* 9 */
.btn-9 {border: none;transition: all 0.3s ease;overflow: hidden;
}
.btn-9:after {position: absolute;content: " ";z-index: -1;top: 0;left: 0;width: 100%;height: 100%;background-color: #1fd1f9;
background-image: linear-gradient(315deg, #1fd1f9 0%, #b621fe 74%);transition: all 0.3s ease;
}
.btn-9:hover {background: transparent;box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),-4px -4px 6px 0 rgba(116, 125, 136, .2), inset -4px -4px 6px 0 rgba(255,255,255,.5),inset 4px 4px 6px 0 rgba(116, 125, 136, .3);color: #fff;
}
.btn-9:hover:after {-webkit-transform: scale(2) rotate(180deg);transform: scale(2) rotate(180deg);box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),-4px -4px 6px 0 rgba(116, 125, 136, .2), inset -4px -4px 6px 0 rgba(255,255,255,.5),inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
}/* 10 */
.btn-10 {background: rgb(22,9,240);
background: linear-gradient(0deg, rgba(22,9,240,1) 0%, rgba(49,110,244,1) 100%);color: #fff;border: none;transition: all 0.3s ease;overflow: hidden;
}
.btn-10:after {position: absolute;content: " ";top: 0;left: 0;z-index: -1;width: 100%;height: 100%;transition: all 0.3s ease;-webkit-transform: scale(.1);transform: scale(.1);
}
.btn-10:hover {color: #fff;border: none;background: transparent;
}
.btn-10:hover:after {background: rgb(0,3,255);
background: linear-gradient(0deg, rgba(2,126,251,1) 0%,  rgba(0,3,255,1)100%);-webkit-transform: scale(1);transform: scale(1);
}/* 11 */
.btn-11 {border: none;background: rgb(251,33,117);background: linear-gradient(0deg, rgba(251,33,117,1) 0%, rgba(234,76,137,1) 100%);color: #fff;overflow: hidden;
}
.btn-11:hover {text-decoration: none;color: #fff;
}
.btn-11:before {position: absolute;content: '';display: inline-block;top: -180px;left: 0;width: 30px;height: 100%;background-color: #fff;animation: shiny-btn1 3s ease-in-out infinite;
}
.btn-11:hover{opacity: .7;
}
.btn-11:active{box-shadow:  4px 4px 6px 0 rgba(255,255,255,.3),-4px -4px 6px 0 rgba(116, 125, 136, .2), inset -4px -4px 6px 0 rgba(255,255,255,.2),inset 4px 4px 6px 0 rgba(0, 0, 0, .2);
}@-webkit-keyframes shiny-btn1 {0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}/* 12 */
.btn-12{position: relative;right: 20px;bottom: 20px;border:none;box-shadow: none;width: 130px;height: 40px;line-height: 42px;-webkit-perspective: 230px;perspective: 230px;
}
.btn-12 span {background: rgb(0,172,238);
background: linear-gradient(0deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%);display: block;position: absolute;width: 130px;height: 40px;box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),7px 7px 20px 0px rgba(0,0,0,.1),4px 4px 5px 0px rgba(0,0,0,.1);border-radius: 5px;margin:0;text-align: center;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;-webkit-transition: all .3s;transition: all .3s;
}
.btn-12 span:nth-child(1) {box-shadow:-7px -7px 20px 0px #fff9,-4px -4px 5px 0px #fff9,7px 7px 20px 0px #0002,4px 4px 5px 0px #0001;-webkit-transform: rotateX(90deg);-moz-transform: rotateX(90deg);transform: rotateX(90deg);-webkit-transform-origin: 50% 50% -20px;-moz-transform-origin: 50% 50% -20px;transform-origin: 50% 50% -20px;
}
.btn-12 span:nth-child(2) {-webkit-transform: rotateX(0deg);-moz-transform: rotateX(0deg);transform: rotateX(0deg);-webkit-transform-origin: 50% 50% -20px;-moz-transform-origin: 50% 50% -20px;transform-origin: 50% 50% -20px;
}
.btn-12:hover span:nth-child(1) {box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),7px 7px 20px 0px rgba(0,0,0,.1),4px 4px 5px 0px rgba(0,0,0,.1);-webkit-transform: rotateX(0deg);-moz-transform: rotateX(0deg);transform: rotateX(0deg);
}
.btn-12:hover span:nth-child(2) {box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),7px 7px 20px 0px rgba(0,0,0,.1),4px 4px 5px 0px rgba(0,0,0,.1);color: transparent;-webkit-transform: rotateX(-90deg);-moz-transform: rotateX(-90deg);transform: rotateX(-90deg);
}/* 13 */
.btn-13 {background-color: #89d8d3;
background-image: linear-gradient(315deg, #89d8d3 0%, #03c8a8 74%);border: none;z-index: 1;
}
.btn-13:after {position: absolute;content: "";width: 100%;height: 0;bottom: 0;left: 0;z-index: -1;border-radius: 5px;background-color: #4dccc6;
background-image: linear-gradient(315deg, #4dccc6 0%, #96e4df 74%);box-shadow:-7px -7px 20px 0px #fff9,-4px -4px 5px 0px #fff9,7px 7px 20px 0px #0002,4px 4px 5px 0px #0001;transition: all 0.3s ease;
}
.btn-13:hover {color: #fff;
}
.btn-13:hover:after {top: 0;height: 100%;
}
.btn-13:active {top: 2px;
}/* 14 */
.btn-14 {background: rgb(255,151,0);border: none;z-index: 1;
}
.btn-14:after {position: absolute;content: "";width: 100%;height: 0;top: 0;left: 0;z-index: -1;border-radius: 5px;background-color: #eaf818;background-image: linear-gradient(315deg, #eaf818 0%, #f6fc9c 74%);box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5);7px 7px 20px 0px rgba(0,0,0,.1),4px 4px 5px 0px rgba(0,0,0,.1);transition: all 0.3s ease;
}
.btn-14:hover {color: #000;
}
.btn-14:hover:after {top: auto;bottom: 0;height: 100%;
}
.btn-14:active {top: 2px;
}/* 15 */
.btn-15 {background: #b621fe;border: none;z-index: 1;
}
.btn-15:after {position: absolute;content: "";width: 0;height: 100%;top: 0;right: 0;z-index: -1;background-color: #663dff;border-radius: 5px;box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),7px 7px 20px 0px rgba(0,0,0,.1),4px 4px 5px 0px rgba(0,0,0,.1);transition: all 0.3s ease;
}
.btn-15:hover {color: #fff;
}
.btn-15:hover:after {left: 0;width: 100%;
}
.btn-15:active {top: 2px;
}/* 16 */
.btn-16 {border: none;color: #000;
}
.btn-16:after {position: absolute;content: "";width: 0;height: 100%;top: 0;left: 0;direction: rtl;z-index: -1;box-shadow:-7px -7px 20px 0px #fff9,-4px -4px 5px 0px #fff9,7px 7px 20px 0px #0002,4px 4px 5px 0px #0001;transition: all 0.3s ease;
}
.btn-16:hover {color: #000;
}
.btn-16:hover:after {left: auto;right: 0;width: 100%;
}
.btn-16:active {top: 2px;
}

效果图片：

HTML、CSS糖果颜色按钮动画相关推荐

  1. android 按钮动画效果_【css特效】按钮动画 - 按压效果

    按钮动画 - "按压效果"​codepen.io <!DOCTYPE html> <html> <head><meta charset=& ...

  2. 【每日一练】68—CSS实现一组渐变按钮动画效果

    在之前,我们也练习过一些按钮动画的效果,今天我们再来练习一组CSS实现的按钮动画效果,下面是今天练习的最终效果: 接下来,我们再来看一下这个案例的源码. HTML代码: <!doctype ht ...

  3. 【前端实例代码】霓虹灯按钮动画效果悬停2| html CSS特效 惊艳| 前端开发 网页制作 基础入门教程

    b站视频演示效果: [web前端特效源码]霓虹灯按钮动画效果悬停2| html CSS特效 惊艳| 前端开发 网页制作 基础入门教程 效果图: 完整代码: <!DOCTYPE html> ...

  4. 【前端实例代码】霓虹灯按钮动画效果悬停| html CSS特效 惊艳| 前端开发 网页制作 基础入门教程

    b站视频演示效果: [web前端特效源码]霓虹灯按钮动画效果悬停| html CSS特效 惊艳| 前端开发 网页制作 基础入门教程 效果图: 完整代码: <!DOCTYPE html> & ...

  5. CSS实现霓虹灯按钮，CSS实现炫酷的霓虹灯按钮动画

    作者:AlbertYang,软件设计师,Java工程师,前端工程师,爱阅读,爱思考,爱编程,爱自由,信奉终生学习,每天学习一点点,就是领先的开始. 微信公众号:AlbertYang 今天教大家使用CS ...

  6. 如何在html中加入动画效果,纯css如何实现按钮的水滴动画效果？

    纯css如何实现按钮的水滴动画效果?下面本篇文章就来给大家介绍一下使用纯css实现Material Design中按钮的水滴动画效果.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. ...

  7. php实现动态按钮效果,纯css实现MaterialDesign水滴动画按钮效果的js实现方法

    本篇文章给大家带来的内容是关于纯css实现Material Design水滴动画按钮效果的js实现方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在上一篇,我们已经实现了用纯cs ...

  8. 纯css实现背景颜色渐变动画

    纯css实现背景颜色渐变动画,代码及效果图如下. body {width: 100wh;height: 100vh;color: #fff;background: linear-gradient(-4 ...

  9. css实现颜色渐变小动画

    效果如下: 完整代码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset=&q ...

最新文章

  1. laravel mysql注入_laravel中如何利用反射实现依赖注入
  2. Project 2007如何打开项目向导
  3. Windows Server 2012 服务器之Web服务器
  4. CVPR 2018 DEDT:《Efficient Diverse Ensemble for Discriminative Co-Tracking》论文笔记
  5. 透明怎么弄_最新版微信如何设置透明背景？这样设置，效果令人惊喜
  6. SWT多线程注意事项
  7. Python 语法糖
  8. 国家市场监管总局：互联网广告不得等倒计时结束才能关闭
  9. mac 下php,Mac 下 PHP
  10. 帕雷诺的个展“共此时”在沪开幕 体验真实与虚妄的交错人生
  11. 编程入门先学什么python-编程零基础应当如何开始学习 Python？
  12. 1.零基础Java基础教程9天入门
  13. egg(18)--Mongodb4.x介绍以及Mongodb账户权限配置
  14. STC学习：可同步显示歌词的ABC英文歌
  15. 数学建模-线性优化模型
  16. 第四章 爬取西刺免费代理ip 并应用到scrapy
  17. Linux快速查看OpenCV版本
  18. 微信小程序腾讯云实时语音转写
  19. AR/VR---沉浸式体验
  20. 魔性计时器html,PDD西卡脸抽不断 拜年秀播出倒计时1天

热门文章

  1. html怎么引轮播图插件,swipe轮播图插件使用.html
  2. Java之滑动窗口详解
  3. 杭州电子科技大学全国计算机排名,2018年杭州电子科技大学世界排名、中国排名、专业排名...
  4. 对Windows 10附近共享和蓝牙天线进行故障排除
  5. 22年考研人数超过450万+,前天de预测，还是格局小了
  6. Unity控制佳能单反拍照及数据获取
  7. 关于视频录制文件4G限制的处理方式
  8. 在word使用中，如何将word中的单独一页设置成横向或纵向
  9. centos7安装gcc报错
  10. 电脑显示你的计算机资源不足怎么办,网络适配器提示系统资源不足解决方法