[前端] 分享四个常用炫彩按钮组件 样式美观 动画丝滑 一（附代码）

已于 2024-09-24 15:27:13 修改
阅读量1.2k 收藏 8
点赞数 13
文章标签： 前端 html css3 css vue.js
于 2024-09-21 11:09:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fei_fei_123/article/details/142413373
版权

[前端] 分享四个常用炫彩按钮组件 样式美观 动画丝滑 一（附代码）

在这里插入图片描述

指路：[前端] 分享三个常用简约按钮组件 样式美观 动画丝滑 一（附代码）

这两天学前端的css技术。发现很强大。许多我认为只有js能解决的问题都可以用css解决。为了进行练习，手写了四个按钮，并且封装成组件。动画过度丝滑、颜色协调。

注意: 代码中出现的事件只为测试示例，需要根据实际需求修改

普通炫彩按钮

效果

在这里插入图片描述

在这里插入图片描述

代码：

<template>
  <div class="colorful-button" @click="handleClick">
    <span>
      <slot>按钮</slot>
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red',
    }
  },
  methods: {
    handleClick() {
      this.$emit('click')
    },
  },
}
</script>

<style scope>
.colorful-button {
  background-image: linear-gradient(35deg, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);
  /* background-size: 400% 400%; */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 50px;
  border-radius: 10px;
  padding: 3px;
  box-shadow: 0 5px 10px -5px #ef03f8;
}
.colorful-button > span {
  color: white;
  font-size: 16px;
  font-weight: 600;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  background: black;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.colorful-button:hover > span {
  color: #eee;
  background: none;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

.colorful-button:hover {
  transform: scale(1.1);
}
</style>

会员按钮

效果

123

在这里插入图片描述

<template>
  <div class="pro-button" @click="handleClick">
    <slot>按钮</slot>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('click')
    },
  },
}
</script>

<style>
.pro-button {
  width: 200px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-weight: bold;
  border: 1px solid #333;
  cursor: pointer;
  background: linear-gradient(15deg, #880088, #aa2068, #cc3f47, #de6f3d, #f09f33, #de6f3d, #cc3f47, #aa2068, #880088) no-repeat;
  background-size: 300%;
  background-position: left center;
  color: hsl(59, 95%, 49%);
  box-shadow: 0 0 5px #333;
  border-radius: 25px;
  font-size: 18px;
  transition: all 0.5s;
}

.pro-button:hover {
  background-size: 320%;
  background-color: #333;
  color: #fff;
  box-shadow: 0 0 5px #fff;
  background-position: right center;
  transform: scale(1.1);
}
</style>

登录/登出按钮1

SVG图在鼠标放入时缩小，直到消失。在鼠标移出时恢复。适合放在空间紧张的地方

效果

321

在这里插入图片描述

<template>
  <div class="login-button" @click="handleClick">
    <div class="arrow">
      <svg
        t="1726728957001"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="5938"
        width="200"
        height="200"
      >
        <path
          d="M409.002667 469.333333L300.8 361.130667 361.130667 300.8l211.2 211.2-211.2 211.2-60.330667-60.330667L409.002667 554.666667H128v-85.333334h281.002667zM469.333333 128h341.333334c46.933333 0 85.333333 38.4 85.333333 85.333333v597.333334c0 46.933333-38.4 85.333333-85.333333 85.333333h-341.333334v-85.333333h341.333334V213.333333h-341.333334V128z"
          fill="#000000"
          p-id="5939"
        ></path>
      </svg>
    </div>
    <div class="slot">
      <slot>按钮</slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    handleClick() {
      this.$emit('click')
    },
  },
}
</script>

<style scoped>
.login-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 50px;
  height: 50px;
  background-color: rgb(47, 255, 64);
  border-radius: 25px;
  box-shadow: 0 0 5px rgb(47, 255, 64);
  transition: all 0.5s ease;
  cursor: pointer;
}

.login-button .arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  transition: all 0.2s ease;
}

.login-button .arrow svg {
  width: 60%;
  height: 60%;
}

.login-button .arrow svg path {
  fill: white;
}

.login-button .slot {
  display: none;
  /* 透明 */
  opacity: 0;
  width: 0%;
  opacity: 0;
  color: white;
  font-size: 0px;
  transition: all 0.2s ease;
  transition-delay: 0.3s;
}

.login-button:hover .slot {
  display: flex;
  opacity: 1;
  width: 100%;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 0 0 5px white;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.login-button:hover .arrow {
  width: 0%;
}

.login-button:hover {
  width: 160px;
}
</style>

登录/登出按钮2

SVG图保持不变，适合放在界面空间较大的地方

效果

asd

在这里插入图片描述

<template>
  <div class="logout-button" @click="handleClick">
    <div class="arrow">
      <svg
        t="1726731738552"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="6907"
        width="200"
        height="200"
      >
        <path
          d="M835.669333 554.666667h-473.173333A42.453333 42.453333 0 0 1 320 512a42.666667 42.666667 0 0 1 42.474667-42.666667h473.173333l-161.813333-161.834666a42.666667 42.666667 0 0 1 60.330666-60.330667l234.666667 234.666667a42.666667 42.666667 0 0 1 0 60.330666l-234.666667 234.666667a42.666667 42.666667 0 0 1-60.330666-60.330667L835.669333 554.666667zM554.666667 42.666667a42.666667 42.666667 0 1 1 0 85.333333H149.525333C137.578667 128 128 137.578667 128 149.482667v725.034666C128 886.4 137.6 896 149.525333 896H554.666667a42.666667 42.666667 0 1 1 0 85.333333H149.525333A106.816 106.816 0 0 1 42.666667 874.517333V149.482667A106.773333 106.773333 0 0 1 149.525333 42.666667H554.666667z"
          p-id="6908"
        ></path>
      </svg>
    </div>
    <div class="slot">
      <slot>按钮</slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    handleClick() {
      this.$emit('click')
    },
  },
}
</script>

<style scoped>
.logout-button .arrow svg {
  width: 50%;
  height: 50%;
}

.logout-button .arrow svg path {
  fill: white;
}

.logout-button {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 50px;
  height: 50px;
  overflow: hidden;
  cursor: pointer;

  background-color: rgb(255, 64, 64);
  border-radius: 25px;
  box-shadow: 0 0 5px 1px rgb(255, 64, 64);

  transition: all 0.5s ease;
}

.logout-button .arrow {
  position: relative;
  left: 0;
  top: 0%;
  width: 50px;
  height: 50px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.logout-button .slot {
  position: absolute;
  left: 50px;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  transition: all 0.5s ease;
}

.logout-button:hover {
  width: 200px;
}

.logout-button:hover .slot {
  opacity: 1;
  width: 70%;
  color: white;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 0 0 5px white;
  overflow: hidden;
  white-space: nowrap;
}
</style>

总结

使用之前：

  1. 了解vue中关于组件的说明。了解vue中组件的引用方式。
  2. 了解vue中各个部分的作用，需要对vue内置功能进行学习。
  3. 对按钮中示例js进行修改，没必要传递事件给上级组件。
  4. 需要在使用按钮的文件中添加相关引用，并且引入组件。
  5. 根据项目需求进行修改

希望大家使用顺利，一起进步，一起学习。

相关资源: 免费 前端资源 纯css实现的4个炫彩vue组件按钮 动画丝滑 样式美观 使用方便 支持拓展 使用HTML 无JavaScript

系列文章：[前端] 分享三个常用简约按钮组件 样式美观 动画丝滑 一（附代码）

飛_
关注
CSS技巧专栏：一日一例 2.纯CSS实现 多彩边框按钮特效
uu0216的博客
07-09 991
content:attr(alt); 通过attr函数 获取本标签的alt值，之所以要这么做，是因为after生成的填充色的图层，会覆盖到按钮上面，导致按钮上写的文字不可见。所以，我们要通过content来输出按钮上的文字。这样写，也是为了让样式和内容脱离。这样我们在html的代码上，给 button 控件写上 alt文字，就可以通过css获取这个文字并输出了。这样，也方便后台程序通过程序动态修改 alt标签输出 的文字，达到修改按钮文字的目标，而不需要去手动修改css文件中的文字。
HTML炫彩按钮,炫彩流光按钮 html+css
weixin_42113380的博客
07-03 1004
话不多，先上效果： 简介：用基础css做一个有一点炫酷的流光按钮，不止按钮，只要是盒子就行。具体步骤：1.先定义一个盒子当做按钮，如我就用a标签：button2.先给a标签写基础的样式，比如长宽等等…：.guang{position: relative;display: inline-block;width: 220px;height: 80px;color: rgb(255, 255, 255)...
❤ ❤分享一个超好看的按钮点击唯美发光炫彩按钮❤ ❤
yingshuangtu的博客
06-21 1108
文章目录前言一、实现效果二、代码总结 前言 分享一个超级无敌好看的唯美按钮，动态 提示：以下是本篇文章正文内容，下面案例可供参考 一、实现效果 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、代码 炫彩按钮.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</ti
[前端] 分享三个常用简约按钮组件 样式美观 动画丝滑 二（附代码）
fei_fei_123的博客
09-24 1084
本文分享了三个简约按钮组件的实现方法，包括微信支付、支付宝支付、立刻购买功能按钮。这些按钮不仅样式美观，还具有平滑的动画效果，全部使用CSS实现。文中提供了详细的代码示例，涵盖HTML模板、Vue.js脚本和CSS样式。此外，文章最后给出了使用这些组件前需要了解的基本步骤，帮助读者更好地将这些按钮集成到自己的项目中。
HTML炫彩按钮,Button - 动画按钮
weixin_33957089的博客
07-03 474
炫彩界面库-帮助文档 v1.8.6.1 - [首页](#)- [相关页面](#)- [模块](#)- [数据结构](#)- [文档首页](#)Button - 动画按钮### 说明Button 动画按钮.### 示例代码struct my_image_info{HIMAGE hImage1;HIMAGE hImage2;HIMAGE hImage...
（web前端每日一练）用JavaScript制作一个跟随鼠标的小球炫彩动画 /doge/doge
Asen-coder的博客
04-30 2348
(web前端每日一练) 使用Javascript制作一个跟随鼠标特效，动态生成美丽的小球
网页精美动效/动画制作 按钮鼠标悬浮动效基础 01《炫彩网页 iVX 无代码动效/动画制作》
1_bit 的博客
04-07 3128
编辑器地址：https://editor.ivx.cn/ 一、准备工作 进入编辑页后，选择其中一种应用类型创建应用，在此以相对应用作为示例： 创建好应用后在此选择对应的屏幕作为示例演示，在此选择电脑屏幕作为对应的大小： 接着选择整个项目的根，在其添加一个行作为内容的容器： 在对象树（右侧）“行”组件中右键可进行重命名： 在此重命名为容器后，选择容器行，在左侧的对应组件的属性中更改行的高度为撑开，此时该行将会撑开整个页面： 撑开的页面如下： 为了整个页面能够更美观，在此在属性中将该行的背景色设置为
网页精美动效/动画制作 按钮鼠标悬浮动效的注意点 02《炫彩网页 iVX 无代码动效/动画制作》
1_bit 的博客
04-07 2933
一、按钮动效的使用 在上一节中，我们创建了一个动效，但是并没有使用，在此我们给按钮设置一个悬浮事件，当鼠标悬浮在按钮之上后就调用该动效，点击按钮添加事件： 点击按钮添加事件后将会出现一个事件编辑框，在事件编辑框中，选择触发时间为鼠标移入： 随后使用箭头选择对应的动效对象： 随后在选择动作时对应的选择重新播放即可： 此时将会出现一个回调时间，并不用理会： 最后点击预览按钮即可： 二、动效需要注意的情况 此时我们预览后发现效果如下： 此时发现动效是有了，但是移动的感觉不是很对，我们再到这个按钮周围
前端资源 纯css实现的4个炫彩vue组件按钮 动画丝滑 样式美观 使用方便 支持拓展 使用HTML 无JavaScript
09-21
纯css实现的4个炫彩vue组件按钮 动画丝滑 样式美观 使用方便 支持拓展 ！代码中的js仅仅为示例，需要根据具体情况进行修改！ 项目特点: 由于无js，拓展性极强。4个按钮都可以无任何额外工作复制粘贴放到项目中。...
前端资源 纯css实现的3个简约vue组件按钮 动画丝滑 样式美观 使用方便 支持拓展 使用HTML 无JavaScript
09-24
纯css实现的3个炫彩vue组件按钮 动画丝滑 样式美观 使用方便 支持拓展 ！代码中的js仅仅为示例，需要根据具体情况进行修改！ 项目特点: 由于无js，拓展性极强。4个按钮都可以无任何额外工作复制粘贴放到项目中。...
HTML前端炫彩在线时钟（另附个人CSDN博客专家 自定义版块前端设置代码）.zip
10-21
另外附个人博客专家 后台设置的前端个人介绍相关代码，均可直接运行，该内容已经在博客中记录，将会在近期发布，欢迎需要的朋友下载。另外，主页专栏“Python从入门到人工智能”也在更新AI干货知识中，也欢迎大家...
使用css3实现炫彩按钮动画效果，十分酷炫
11-21
使用css3动画制作围绕按钮旋转的炫光效果，效果nice的很！ 图片效果查看 https://img-blog.csdnimg.cn/7c0867c562cb4cb5ae33c113e0a242f8.png
HTML5炫彩粒子动画背景特效特效代码
03-20
HTML5炫彩粒子动画背景特效是一种利用HTML5的Canvas元素结合JavaScript编程实现的动态视觉效果。Canvas是HTML5中的一项重要特性，它允许开发者在网页上进行2D图形的绘制，为网页添加丰富的动态视觉体验。 这个特效...
webview2加载本地页面
qq_25160759的博客
09-23 668
推荐使用这种方式，加载速度比WebResourceRequested快（实测的确是快点），但是需要支持：ICoreWebView2_3。个人测试加载html字符串，对于html中引入了css和js，加载不太友好。这种方式是通过截获网络请求，然后返回需要的数据。以达到成功请求的假象。
前端面试经验总结2(经典问题篇)
最新发布
rita_0567的博客
09-28 675
因为计算机技术的快速发展，所以程序员如果不能保持对技术的持续性学习，会更容易的被淘汰，我从来不觉得程序员是一个轻松的职业，但是程序员是我最热爱的职业，我做好了充足的准备让自己能够长期在前端行业深耕。既要扩充自己的知识宽度，同时又不要一味的追求学习的东西越多越来，今天学两天这个，明天学两天那个，工作中又没有得到使用的话，很快也都会忘记的。了解，贵公司主要是在xxx行业从事xxx业务，贵公司所处的行业是我非常看好的，我感觉贵公司的氛围我很喜欢，比如xxxx。遇到了哪些挑战，我如何在不利的条件下成长起来的。
apply、call和bind的作用和区别
欢迎来到我的博客！我是一名全栈开发工程师，主攻前端开发。希望通过我的博客，能够与大家共同学习和成长。感谢您的关注和支持！
09-23 731
javascript中，apply、call和bind的作用和区别介绍。
DC00015基于java web校园网上购物系统
黄昏下的黎明的博客
09-24 672
DC00015【含配套文档】基于java web校园网上购物系统。
grpcweb 客户端请求grpc-java服务器
nddjava的专栏
09-24 412
1. 定义grpc proto文件：HelloWorld.proto。5.grpc-web代理：nginx。3. grpc-web js生成。2. java grpc服务。4. grpc-web代码。
jQuery实现的经典炫彩动画菜单代码实例
本篇文章主要介绍了如何使用jQuery实现一个经典的炫彩菜单动画效果。该菜单设计巧妙地结合了CSS和JavaScript，展示了动态交互性和视觉吸引力。以下是关键知识点的详细解析： 1. **HTML结构**: - 首先，HTML部分...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

飛_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值