CSS3 制作的彩虹按钮样式


Posted in HTML / CSS onApril 11, 2021

实现效果:

CSS3 制作的彩虹按钮样式

实现代码:

html

<div class="buttons">
  <h1>Simple hover effects with <code>box-shadow</code></h1>
  <button class="fill">Fill In</button>
  <button class="pulse">Pulse</button>
  <button class="close">Close</button>
  <button class="raise">Raise</button>
  <button class="up">Fill Up</button>
  <button class="slide">Slide</button>
  <button class="offset">Offset</button>
</div>

CSS

/*
  https://developer.mozilla.org/en/docs/Web/CSS/box-shadow
  box-shadow: [inset?] [top] [left] [blur] [size] [color];

  Tips:
    - We're setting all the blurs to 0 since we want a solid fill.
    - Add the inset keyword so the box-shadow is on the inside of the element
    - Animating the inset shadow on hover looks like the element is filling in from whatever side you specify ([top] and [left] accept negative values to become [bottom] and [right])
    - Multiple shadows can be stacked
    - If you're animating multiple shadows, be sure to keep the same number of shadows so the animation is smooth. Otherwise, you'll get something choppy.
*/
.fill:hover,
.fill:focus {
  box-shadow: inset 0 0 0 2em var(--hover);
}

.pulse:hover,
.pulse:focus {
  -webkit-animation: pulse 1s;
          animation: pulse 1s;
  box-shadow: 0 0 0 2em rgba(255, 255, 255, 0);
}

@-webkit-keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 var(--hover);
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 var(--hover);
  }
}
.close:hover,
.close:focus {
  box-shadow: inset -3.5em 0 0 0 var(--hover), inset 3.5em 0 0 0 var(--hover);
}

.raise:hover,
.raise:focus {
  box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
  transform: translateY(-0.25em);
}

.up:hover,
.up:focus {
  box-shadow: inset 0 -3.25em 0 0 var(--hover);
}

.slide:hover,
.slide:focus {
  box-shadow: inset 6.5em 0 0 0 var(--hover);
}

.offset {
  box-shadow: 0.3em 0.3em 0 0 var(--color), inset 0.3em 0.3em 0 0 var(--color);
}
.offset:hover, .offset:focus {
  box-shadow: 0 0 0 0 var(--hover), inset 6em 3.5em 0 0 var(--hover);
}

.fill {
  --color: #a972cb;
  --hover: #cb72aa;
}

.pulse {
  --color: #ef6eae;
  --hover: #ef8f6e;
}

.close {
  --color: #ff7f82;
  --hover: #ffdc7f;
}

.raise {
  --color: #ffa260;
  --hover: #e5ff60;
}

.up {
  --color: #e4cb58;
  --hover: #94e458;
}

.slide {
  --color: #8fc866;
  --hover: #66c887;
}

.offset {
  --color: #19bc8b;
  --hover: #1973bc;
}

button {
  color: var(--color);
  transition: 0.25s;
}
button:hover, button:focus {
  border-color: var(--hover);
  color: #fff;
}

body {
  color: #fff;
  background: #17181c;
  font: 300 1em "Fira Sans", sans-serif;
  justify-content: center;
  align-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
  display: flex;
}

button {
  background: none;
  border: 2px solid;
  font: inherit;
  line-height: 1;
  margin: 0.5em;
  padding: 1em 2em;
}

h1 {
  font-weight: 400;
}

code {
  color: #e4cb58;
  font: inherit;
}

以上就是CSS3 制作的彩虹按钮样式的详细内容,更多关于CSS3 按钮样式的资料请关注三水点靠木其它相关文章!

 
HTML / CSS 相关文章推荐
css3的图形3d翻转效果应用示例
Apr 08 HTML / CSS
css3实现3D色子翻转特效
Dec 23 HTML / CSS
纯css3实现走马灯效果
Dec 26 HTML / CSS
HTML5的结构和语义(3):语义性的块级元素
Oct 17 HTML / CSS
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
Jul 15 HTML / CSS
有关HTML5页面在iPhoneX适配问题
Nov 13 HTML / CSS
Html5获取高德地图定位天气的方法
Dec 26 HTML / CSS
html5 canvas手势解锁源码分享
Jan 07 HTML / CSS
用position:sticky完美解决小程序吸顶问题的实现方法
Apr 24 HTML / CSS
详解CSS中的特指度和层叠问题
Jul 15 HTML / CSS
flex弹性布局详解
Mar 20 HTML / CSS
CSS中em的正确打开方式详解
几款流行的HTML5 UI框架比较(小结)
css 中多种边框的实现小窍门
HTML中table表格拆分合并(colspan、rowspan)
HTML速写之Emmet语法规则的实现
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
Apr 07 #HTML / CSS
html+css 实现简易导航栏功能
Apr 07 #HTML / CSS
You might like
function.inc.php超越php
2006/12/09 PHP
PHP取整函数:ceil,floor,round,intval的区别详细解析
2013/08/31 PHP
php jsonp单引号转义
2014/11/23 PHP
PHP将Excel导入数据库及数据库数据导出至Excel的方法
2015/06/24 PHP
CI框架支持$_GET的两种实现方法
2016/05/18 PHP
深入解析Laravel5.5中的包自动发现Package Auto Discovery
2017/09/13 PHP
PHP+MySQL使用mysql_num_rows实现模糊查询图书信息功能
2018/05/31 PHP
深入解析PHP底层机制及相关原理
2020/12/11 PHP
js实现运行代码需要刷新的解决方法
2007/08/18 Javascript
javascript客户端解决方案 缓存提供程序
2010/07/14 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
2010/12/10 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
2015/04/25 Javascript
js实现遍历含有input的table实例
2015/12/07 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
2016/05/05 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
2016/12/29 Javascript
React学习笔记之条件渲染(一)
2017/07/02 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
2019/05/07 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
2020/04/03 Javascript
[59:08]Ti4 冒泡赛第二天 NEWBEE vs Titan 2
2014/07/15 DOTA
[03:56]DOTA2完美大师赛趣味视频之小鸽子和Mineski打台球
2017/11/24 DOTA
[01:06:59]完美世界DOTA2联赛PWL S2 Magma vs FTD 第一场 11.29
2020/12/02 DOTA
Python调用命令行进度条的方法
2015/05/05 Python
Python之str操作方法(详解)
2017/06/19 Python
pyqt 实现为长内容添加滑轮 scrollArea
2019/06/19 Python
在macOS上搭建python环境的实现方法
2019/08/13 Python
Python将列表中的元素转化为数字并排序的示例
2019/12/25 Python
django中cookiecutter的使用教程
2020/12/03 Python
pandas实现导出数据的四种方式
2020/12/13 Python
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
东方红海科技面试题软件测试方面
2012/02/08 面试题
毕业生找工作求职信
2014/08/05 职场文书
基层党员对照检查材料
2014/09/24 职场文书
村主任个人对照检查材料
2014/10/01 职场文书
学校2014年度工作总结
2014/12/06 职场文书
刑事案件上诉状
2015/05/23 职场文书
搞笑婚庆主持词
2015/06/29 职场文书