-
SwitchButton 开关按钮的多种实现方式源码
2014-04-15 19:32:29SwitchButton 开关按钮的多种实现方式 具体的说明等可以查看以下文章: http://blog.csdn.net/vipzjyno1/article/details/23707149 -
CSS实现霓虹灯按钮,CSS实现炫酷的霓虹灯按钮动画
2021-01-09 10:30:09作者:AlbertYang,软件设计师,Java工程师,前端工程师,爱阅读,爱思考,爱编程,爱自由,信奉终生学习,每天学习一点点,就是领先的开始。...CSS霓虹灯按钮动画,CSS实现炫酷的霓虹灯按钮动画 HTML <!DO.作者:AlbertYang,软件设计师,Java工程师,前端工程师,爱阅读,爱思考,爱编程,爱自由,信奉终生学习,每天学习一点点,就是领先的开始。
微信公众号:AlbertYang
今天教大家使用CSS实现一个霓虹灯按钮动画效果,大家有什么不懂的可以留言问我,视频已经同步到B站,欢迎关注我的B站账号。
视频
视频链接:https://www.bilibili.com/video/BV1Zi4y1F7ut
CSS霓虹灯按钮动画,CSS实现炫酷的霓虹灯按钮动画
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>霓虹灯按钮:微信公众号AlbertYang</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- 容器 --> <div class="container"> <!-- 按钮 --> <a href="#" style="--x:0"><span>关注</span></a> <a href="#" style="--x:1"><span>收藏</span></a> <a href="#" style="--x:2"><span>投币</span></a> <a href="#" style="--x:3"><span>点赞</span></a> <a href="#" style="--x:4"><span>评论</span></a> <a href="#" style="--x:5"><span>转发</span></a> </div> </body> </html>
CSS
/* 清除浏览器默认边距, 使边框和内边距的值包含在元素的height和width内 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* flex布局,让内容垂直和水平居中 */ body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #000; } /* flex布局,让内容垂直和水平居中,超过的部分换行显示 */ .container { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } /* 按钮的基本样式 */ .container a { position: relative; padding: 15px 30px; margin: 50px; border: 2px solid #0f0; font-size: 18px; font-weight: 600; text-decoration: none; letter-spacing: 5px; color: #fff; filter: hue-rotate(calc(var(--x) * 60deg)); transition: 0.5s; } /* 鼠标经过时改变按钮样式 */ .container a:hover { transition-delay: 1.5s; color: #000; box-shadow: 0 0 10px #0f0, 0 0 20px #0f0, 0 0 40px #0f0, 0 0 80px #0f0, 0 0 160px #0f0, 0 0 320px #0f0; } a span { position: relative; z-index: 10; } /* 通过伪元素::before实现按钮左边的线 */ .container a::before { content: ""; position: absolute; left: -20px; top: 50%; transform: translateY(-50%); background: #0f0; width: 20px; height: 2px; box-shadow: 5px -8px 0 #0f0, 5px 8px 0 #0f0; transition: width 0.5s, height 0.5s, left 0.5s, box-shadow 0.5s; transition-delay: 0s, 1s, 0s, 0.5s; } /* 鼠标经过时改变线条的样式 */ .container a:hover::before { width: 60%; height: 100%; left: -2px; box-shadow: 0 0 0 #0f0, 0 0 0 #0f0; } /* 通过伪元素::after实现按钮右边的线 */ .container a::after { content: ""; position: absolute; right: -20px; top: 50%; transform: translateY(-50%); background: #0f0; width: 20px; height: 2px; box-shadow: -5px -8px 0 #0f0, -5px 8px 0 #0f0; transition: width 0.5s, height 0.5s, right 0.5s, box-shadow 0.5s; transition-delay: 0s, 1s, 0s, 0.5s; } /* 鼠标经过时改变线条的样式 */ .container a:hover::after { width: 60%; height: 100%; right: -2px; box-shadow: 0 0 0 #0f0, 0 0 0 #0f0; }
今天的学习就到这里了,由于本人能力和知识有限,如果有写的不对的地方,还请各位大佬批评指正。有什么不明白的地方欢迎给我留言,如果想继续学习提高,欢迎关注我,每天进步一点点,就是领先的开始,加油。如果觉得本文对你有帮助的话,欢迎转发,评论,点赞!!!
-
如何实现按钮水平居中
2018-06-07 18:26:53button是一个行内块级元素display:inline-block; 所以处理方式很简单,可以用以下两种方式: 方式一: ...按钮居中</button> </div> 方式二: <div> ...button是一个行内块级元素display:inline-block;
所以处理方式很简单,可以用以下两种方式:
方式一:
<div style="text-align:center"> <button>按钮居中</button> </div>
方式二:
<div> <button style="display:block;margin:0 auto">按钮居中</button> </div>
-
普通按钮+提交按钮+重置按钮
2017-08-08 03:38:20按钮type=“button” 普通按钮; type=“submit” 提交按钮; type=“reset” 重置按钮; name 给按钮命名; value 设置显示在按钮上的文字;(1)普通按钮 需要与事件关联使用,用来响应onclick事件。 (2...按钮
type=“button” 普通按钮;
type=“submit” 提交按钮;
type=“reset” 重置按钮;
name 给按钮命名;
value 设置显示在按钮上的文字;(1)普通按钮
需要与事件关联使用,用来响应onclick事件。
(2)reset按钮
单击该按钮,不论表单是否已经填写或输入数据,表单中各个元素都会被重置到最初状态,而填写或输入的数据将被清空。
(3)submit按钮
表单将会提交到action属性所指定的URL并传递表单数据。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>按钮</title> </head> <body> <form method="post" action=""> <p>用户名:<input name="name" type="text"></p> <p>密 码: <input name="pass" type="password"></p> <p> <input type="reset" name="butReset" value="reset按钮"> <input type="submit" name="butSubmit" value="submit按钮"> <input type="button" name="butButton" value="button按钮"> </p> </form> </body> </html>
-
vue 所有按钮属性、vue Button 所有按钮属性事件、vue a-button 所有按钮属性事件、vue 按钮所有属性事件、...
2019-09-24 17:29:40vue 所有按钮、vue Button 所有属性、vue a-button 所有属性...按钮类型 组件注册 import { Button } from ‘ant-design-vue’; Vue.use(Button); 1.按钮类型 Primary Default Dashed Danger Link ...vue 所有按钮属性、vue Button 所有按钮属性事件、vue a-button 所有按钮属性事件、vue 按钮所有属性事件、vue
1.组件注册
import { Button } from ‘ant-design-vue’;
Vue.use(Button);1.按钮类型
按钮有四种类型:主按钮、次按钮、虚线按钮、危险按钮和链接按钮。主按钮在同一个操作区域最多出现一次。<template> <div> <a-button type="primary">Primary</a-button> <a-button>Default</a-button> <a-button type="dashed">Dashed</a-button> <a-button type="danger">Danger</a-button> <a-button type="link">Link</a-button> </div> </template>
2.按钮组合
可以将多个Button
放入Button.Group
的容器中。
通过设置size
为large
small
分别把按钮组合设为大、小尺寸。若不设置size
,则尺寸为中。<template> <div id="components-button-demo-button-group"> <h4>Basic</h4> <a-button-group> <a-button>Cancel</a-button> <a-button type="primary">OK</a-button> </a-button-group> <a-button-group> <a-button disabled>L</a-button> <a-button disabled>M</a-button> <a-button disabled>R</a-button> </a-button-group> <a-button-group> <a-button type="primary">L</a-button> <a-button>M</a-button> <a-button>M</a-button> <a-button type="dashed">R</a-button> </a-button-group> <h4>With Icon</h4> <a-button-group> <a-button type="primary"> <a-icon type="left" />Go back </a-button> <a-button type="primary"> Go forward<a-icon type="right" /> </a-button> </a-button-group> <a-button-group> <a-button type="primary" icon="cloud" /> <a-button type="primary" icon="cloud-download" /> </a-button-group> </div> </template> <style> #components-button-demo-button-group h4 { margin: 16px 0; font-size: 14px; line-height: 1; font-weight: normal; } #components-button-demo-button-group h4:first-child { margin-top: 0; } #components-button-demo-button-group .ant-btn-group { margin-right: 8px; } </style>
3.不可用状态
添加disabled
属性即可让按钮处于不可用状态,同时按钮样式也会改变<template> <div> <a-button type="primary">Primary</a-button> <a-button type="primary" disabled>Primary(disabled)</a-button> <br /> <a-button>Default</a-button> <a-button disabled>Default(disabled)</a-button> <br /> <a-button type="dashed">Dashed</a-button> <a-button type="dashed" disabled>Dashed(disabled)</a-button> <br /> <a-button type="link">Link</a-button> <a-button type="link" disabled>Link(disabled)</a-button> <div :style="{ padding: '8px 8px 0 8px', background: 'rgb(190, 200, 200)' }"> <a-button ghost>Ghost</a-button> <a-button ghost disabled>Ghost(disabled)</a-button> </div> </div> </template>
4.幽灵按钮
幽灵按钮将其他按钮的内容反色,背景变为透明,常用在有色背景上。<template> <div :style="{ background: 'rgb(190, 200, 200)', padding: '26px 16px 16px' }"> <a-button type="primary" ghost>Primary</a-button> <a-button ghost>Default</a-button> <a-button type="dashed" ghost>Dashed</a-button> <a-button type="danger" ghost>Danger</a-button> <a-button type="link" ghost>Link</a-button> </div> </template>
5.图标按钮
当需要在Button
内嵌入Icon
时,可以设置icon
属性,或者直接在Button
内使用Icon
组件。
如果想控制Icon
具体的位置,只能直接使用Icon
组件,而非icon
属性。<template> <div> <a-button type="primary" shape="circle" icon="search"></a-button> <a-button type="primary" icon="search">Search</a-button> <a-button shape="circle" icon="search" /> <a-button icon="search">Search</a-button> <a-button shape="circle" icon="search" /> <a-button icon="search">Search</a-button> <a-button type="dashed" shape="circle" icon="search" /> <a-button type="dashed" icon="search">Search</a-button> </div> </template>
6.加载中状态
第三个按钮为悬浮:
添加loading
属性即可让按钮处于加载状态,最后两个按钮演示点击后进入加载状态。<template> <div> <a-button type="primary" loading> Loading </a-button> <a-button type="primary" size="small" loading> Loading </a-button> <br /> <a-button type="primary" :loading="loading" @mouseenter="enterLoading"> mouseenter me! </a-button> <a-button type="primary" icon="poweroff" :loading="iconLoading" @click="enterIconLoading"> 延迟1s </a-button> <br /> <a-button shape="circle" loading /> <a-button type="primary" shape="circle" loading /> </div> </template> <script> export default { data () { return { loading: false, iconLoading: false, } }, methods: { enterLoading () { this.loading = true }, enterIconLoading () { this.iconLoading = { delay: 1000 } }, }, } </script>
7.多个按钮组合
按钮组合使用时,推荐使用1个主操作 + n 个次操作,3个以上操作时把更多操作放到Dropdown.Button
中组合使用。<template> <div> <a-button type="primary">Primary</a-button> <a-button>secondary</a-button> <a-dropdown> <a-menu slot="overlay" @click="handleMenuClick"> <a-menu-item key="1">1st item</a-menu-item> <a-menu-item key="2">2nd item</a-menu-item> <a-menu-item key="3">3rd item</a-menu-item> </a-menu> <a-button> Actions <a-icon type="down" /> </a-button> </a-dropdown> </div> </template> <script> export default { methods: { handleMenuClick(e) { console.log('click', e); } } } </script>
8.按钮尺寸
按钮有大、中、小三种尺寸。
通过设置size
为large
small
分别把按钮设为大、小尺寸。若不设置size
,则尺寸为中。<template> <div> <a-radio-group :value="size" @change="handleSizeChange"> <a-radio-button value="large">Large</a-radio-button> <a-radio-button value="default">Default</a-radio-button> <a-radio-button value="small">Small</a-radio-button> </a-radio-group> <br /><br /> <a-button type="primary" :size="size">Primary</a-button> <a-button :size="size">Normal</a-button> <a-button type="dashed" :size="size">Dashed</a-button> <a-button type="danger" :size="size">Danger</a-button> <a-button type="link" :size="size">Link</a-button> <br /> <a-button type="primary" shape="circle" icon="download" :size="size" /> <a-button type="primary" icon="download" :size="size">Download</a-button> <br /> <a-button-group :size="size"> <a-button type="primary"> <a-icon type="left" />Backward </a-button> <a-button type="primary"> Forward<a-icon type="right" /> </a-button> </a-button-group> </div> </template> <script> export default { data () { return { size: 'large', } }, methods: { handleSizeChange (e) { this.size = e.target.value }, }, } </script>
9.block 按钮
block属性将使按钮适合其父宽度。<template> <div> <a-button type="primary" block>Primary</a-button> <a-button block>Default</a-button> <a-button type="dashed" block>Dashed</a-button> <a-button type="danger" block>Danger</a-button> <a-button type="link" block>Link</a-button> </div> </template>
2.API
1.属性:
推荐顺序为:
type
->shape
->size
->loading
->disabled
属性 说明 类型 默认值 disabled
按钮失效状态 boolean
false
ghost
幽灵属性,使按钮背景透明,版本 2.7 中增加 boolean
false
href
点击跳转的地址,指定此属性 button 的行为和 a 链接一致 string
-
htmlType
设置 button
原生的type
值,可选值请参考 HTML 标准string
button
icon
设置按钮的图标类型 string
-
loading
设置按钮载入状态 boolean | { delay: number }
false
shape
设置按钮形状,可选值为 circle
round
或者不设string
-
size
设置按钮大小,可选值为 small
large
或者不设string
default
target
相当于 a 链接的 target 属性,href 存在时生效 string
-
type
设置按钮类型,可选值为 primary
dashed
danger
link
或者不设string
-
block
将按钮宽度调整为其父宽度的选项 boolean
false
2.事件
事件名称 说明 回调参数 click
点击按钮时的回调 (event) => void
-
如何监听小程序返回按钮事件?
2018-08-06 14:27:09应用场景: 通常情况下,在关闭当前...翻阅所有小程序的官方文档,尚未给出监听返回按钮的事件,因此如果想让 上述场景1中的刷新其他指定页面、或者请求其他页面接口,不过也可采用其他方法实现这个功能。 ... -
FastAdmin 权限判断,自定义table操作按钮,列表按钮,隐藏按钮,隐藏自定义按钮
2019-04-18 10:21:34一、JS自定义按钮 + 按钮隐藏 1、FastAdmin JS自定义按钮 效果图: 自定义video视频按钮 { field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, buttons: [ { ... -
html 按钮
2018-12-23 10:18:10按钮分为三种:button(普通按钮), submit(提交按钮) , reset(重置按钮) 普通按钮: 语法: <input type="button" value="普通按钮取值" onclick="javaScript脚本程序"&... -
单选按钮组件——单选按钮及按钮组
2018-06-08 17:47:31/* * 单选按钮组件 * 默认情况下,JRadioButton显示一个圆形图标,单选按钮是Swing组件中JRadionButton类的对象 * 该类是JToggleButton的子类,而JToggleButton是AbstractButton的子类。 *... -
Bootstrap-查询按钮和重置按钮
2016-05-30 23:37:251、问题背景 一般情况下,查询列表有查询条件、查询按钮和重置按钮,输入查询条件,点击查询按钮查询列表等数据;点击重置按钮会将查询条件恢复到原始状态2、实现源码 Bootstrap-查询按钮和重置按钮 ... -
python-Tkinter按钮触发事件(三)
2018-06-01 14:46:05python-Tkinter按钮触发事件(三) 更多原创性能测试文章关注 十年性能测试专家&7DGroup公众号 一、图文并茂 from tkinter import * ''' 实现图文并茂,上面的textLabel组件设置文本格式的。下面imgLabel... -
HTML 表单按钮
2018-04-13 20:11:53表单按钮表单按钮一般分为三类,分别是提交按钮、重置按钮和普通按钮。提交按钮、重置按钮只能在表单中使用,普通按钮则可以在网页的任何地方使用。从本质上讲,表单按钮也是表单控件,之所以把它分离出来,单独介绍... -
PyCharm运行按钮是灰色的
2019-01-04 13:11:27不论我怎么设置解释器,运行按钮都是灰色的。 我注意到右上角有个add Configuration,试着点进去,里面也可以设置解释器,but ,没有效果,设置了下面也不会出现结果。 查遍了网上的方法,也米的办法,最终,高人... -
HTML 普通按钮
2018-04-16 21:18:59普通按钮把 input 元素的 type 属性设置为“button”,可以创建普通按钮。按钮上显示的文本是value 属性的值,如果没有提供 value 属性,则只创建一个空按钮。如:<input type="button" value=&... -
android按钮点击动画特效,有关注按钮点击效果,有收藏按钮,点赞按钮,评论按钮等各种效果
2017-05-19 17:01:50android按钮点击动画特效,有关注按钮点击效果,有收藏按钮,点赞按钮,评论按钮等各种效果,适合按钮效果处理。很不错的Android特效,按钮点击效果。大家可以下载看看。 demo下载 -
HTML 重置按钮
2018-04-13 20:12:27重置按钮有时候,用户填完表单信息后,发现填写错误,希望将表单数据还原为页面加载时的状态。为此,可以在表单上创建一个重置按钮(reset按钮)。把 input 元素的 type 属性设置为“reset”,来创建重置按钮。value... -
MATLAB中的单选按钮和按钮组
2019-04-20 16:42:52MATLAB GUI中的单选按钮和按钮组 matlabGUI界面中的单选(radiobutton)按钮不提供互斥功能,要通过程序实现。 方法一: 假设有3个radiobutton,分别为radiobutton1、radiobutton2、radiobutton3。 radiobutton1的... -
如何实现input输入框自带清除按钮
2018-01-08 14:20:14即在输入框中输入内容时,右边显示“×”按钮;输入框为空时,“×”按钮消失。难点在于获取焦点的同时,获取输入内容。注意:本例子的样式基于bootstrap.css和jquery,不再单独添加样式。1.html部分,将button和... -
HTML自定义选取按钮(input样式的按钮)
2018-10-27 16:51:21自定义文件上传按钮 谷歌浏览器下,默认的按钮是这个样子的: 火狐浏览器下是酱紫的: IE浏览器下是这个样子的: 个人表示真的丑陋,无法接受! 修改 首先 <!DOCTYPE html> <html&... -
Flutter基础Widget之按钮(RaisedButton、FlatButton、OutlineButton,IconButton)
2018-12-17 16:52:21Flutter中给我们预先定义好了一些按钮控件给我们用,常用的按钮如下 RaisedButton :凸起的按钮,其实就是Android中的Material Design风格的Button ,继承自MaterialButton FlatButton :扁平化的按钮,继承自... -
微信小程序中好看的按钮样式(渐变色)——view的点击变色效果——按钮漂亮的圆角边框
2018-09-22 09:56:54在.wxss文件中代码如下: ...是控制按钮边变圆 */ .goodbutton { margin-top: 30px; width: 80%; background-color: rgb(252, 126, 67); color: white; border-radius: 98rpx; background: bg_red... -
Qt实现不规则按钮之自绘圆盘式按钮
2018-01-21 23:06:45在上一篇文章中我们讲述了如何实现不规则按钮( Qt简述如何实现不规则按钮),其中提到了另外一种方法就是自绘,今天就此谈一谈如何自绘实现一个圆盘式的按钮。下面先看一张效果图。 二、代码之路 其实实现很... -
微信小程序悬浮按钮
2018-04-19 16:18:32在微信小程序开发过程中,我们一般会使用到...先上下效果图,这边可以看到右下方有个固定的悬浮按钮。设置一下图片的位置就可以实现这个效果了。 //wxss代码 .add_icon{ position: fixed; width:42px; ... -
MUI-button(按钮),【有底色按钮】&【无底色、有边框按钮】&【链接按钮】
2018-12-13 17:55:37本文主要介绍【有底色按钮】&【无底色、有边框按钮】&【链接按钮】 mui使用.mui-btn类即可生成一个默认灰色按钮,继续添加.mui-btn-颜色值或.mui-btn-场景可生成对应色系的按钮。 场景和颜色值... -
html图片按钮&按钮点击效果
2018-10-11 19:50:28* 按钮样式 */ /* Radomir */ .ripple { position: relative; /*//隐藏溢出的径向渐变背景*/ overflow: hidden; } .ripple:after { content: ""; ... -
layui中实现按钮点击事件
2019-06-29 15:55:46在layui中,我们可以通过layui提供的监听方法来对按钮事件进行监听,但是layui提供的方法中只能监听按钮的提交事件,即如下所示: <button class="layui-btn" lay-submit lay-filter="submitBtn">确定</... -
java基础-点击按钮更换按钮颜色,并设置默认被选中按钮
2016-06-04 17:02:59封装一个组件。自动生成一排按钮。并且点击按钮更换该按钮颜色,并设置默认被选中按钮。 -
如何调换antd中Modal对话框确认按钮和取消按钮两个按钮的位置
2018-03-19 20:40:00今天有个工作是把所有的确认按钮放在取消按钮的左边,类似于下图这样的,公司用的时antd组件 但是antd组件的按钮时确认键放在右边的 可以采用下面的方式,将按钮调换过来: 对的,就是在modal里面的footer... -
【JavaScript】按钮绑定点击事件-onCliek事件
2018-03-19 23:32:41【JavaScript】按钮绑定点击事件-onCliek事件 <button type="submit" id="btn">btn</button> 1. 第一种: $("#btn").click(function(event){} 2. 第二种: document.getElementById('#foo').... -
Axure RP9 - 实现按钮点击改变自己以及其他按钮颜色
2020-04-23 16:48:281、首选创建一个页面,添加按钮1以及按钮2 2、选中1按钮,点击右侧交互选择选中事件,设置填充颜色以及文字颜色,若有需要也可以设置透明等操作,按钮2同理。 3、选中按钮1添加单击事件,设置选中,选择当前...
-
Kmeans_demo.zip
-
一周掌握FPGA Verilog HDL语法 汇总篇
-
QuickDesign Lite installer.zip
-
进程和线程的区别
-
题型举例11111.txt
-
python办公自动化技巧
-
DML语言的学习
-
串口监测AccessPort137.rar
-
hadoop自动化运维工具Ambari应用实践
-
SubstancePainter插件开发-基础入门
-
287. 寻找重复数(转换成图论去做,环形链表)
-
DQL语言-分页查询
-
Kotlin协程极简入门与解密
-
微服务系列第七十一季-Introducing Spring Boot
-
一周掌握FPGA Verilog HDL语法 day 5
-
云计算基础-Linux系统管理员
-
【数据分析-随到随学】Mysql数据库
-
Excel高级图表技巧
-
中外专利信息的检索与利用
-
计算机网络基础