使用css和js给按钮添加微交互的几种方式

这篇具有很好参考价值的文章主要介绍了使用css和js给按钮添加微交互的几种方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

使用css和js给按钮添加微交互的几种方式

在现实世界中,当我们轻弹或按下某些东西时,它们会发出咔嗒声,例如电灯开关。有些东西会亮起或发出蜂鸣声,这些响应都是“微交互”,让我们知道我们何时成功完成了某件事。在本文中,我们将学习向网页按钮添加微交互的几种简单方法。

什么是微交互

微交互是用户界面上的小交互或动画。当用户执行操作时,它们向用户提供即时反馈。微交互可以保持用户的参与度并可以改善他们的整体体验。

微交互的一些示例包括我们与某人在线聊天时的打字指示器、下载的进度条以及刷新页面时的加载指示器。

按钮是网站上最常见的交互元素之一,它们可以执行一系列任务,例如切换、提交、删除、关闭、选择(通过单选按钮、选项按钮或选择菜单)等。

基本样式

<style>
  * {
    margin: 0;
    padding: 0
  }
  body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>

有弹性的微交互

我们可以使用 CSStransform属性创建一个 3D 按钮,单击它时该按钮会弹起。

<button class="btn"><span class="text">提交</span></button>

对于此示例,我们在<button>中嵌套了一个<span>. 通常,创建按钮时不需要这样做,但我们需要它来创建按钮的最终 3D 外观。

.btn {
  position: relative;
  background: #004958;
  border-radius: 15px;
  border: none;
  cursor: pointer;
}

.text {
  display: block;
  padding: 15px 45px;
  border-radius: 15px;
  background: #00c2cb;
  font-size: 1.5rem;
  font-weight: 500;
  color: #42455a;
  transform: translateY(-6px);
  transition: transform ease 0.1s;
}

.btn:active .text {
  transform: translateY(-2px);
}

使用css和js给按钮添加微交互的几种方式,css,css,javascript,交互

带边框动画的按钮

有多种方法可以为按钮的边框设置动画,因此我们将展示几个示例。

简单的边框微交互

让我们从简单的事情开始。通常,如果我们想向任何元素添加边框,我们会使用border 属性。但是在CSS中,也有outline属性,这俩非常相似。它在元素周围添加轮廓。轮廓会覆盖它们所应用的元素,这意味着它们是围绕边框绘制的。

它们甚至以相同的方式声明。以下是带有轮廓和边框的按钮示例:

button {
  border: 3px solid cyan;
  outline: 3px solid red;
}

下面的屏幕截图显示了它的样子:

使用css和js给按钮添加微交互的几种方式,css,css,javascript,交互

轮廓不会影响主元素(在本例中为按钮)的尺寸,并且它们可以重叠其他内容或元素。我们还可以使用outline-offset属性更改他们的位置。

正偏移值会将轮廓向外推,远离边框。负值将起到相反的作用。因此,例如,如果我们想隐藏轮廓,我们需要为其指定边框宽度的负值。这就是我们为按钮创建微交互的动画:

<button class="btn">提交</button>
button {
  border: none;
  position: relative;
  padding: 15px 45px;
  background: transparent;
  border-radius: 10px;
  border: 2px solid #00c2cb;
  outline: 2px solid #00c2cb;
  outline-offset: -2px;
  font-size: 1.5rem;
  color: #00c2cb;
  font-weight: 500;
  cursor: pointer;
  transition: outline-offset 200ms ease;
}

button:hover {
  outline-offset: 3px;
}
button:active{
  transform: scale(0.95);
}

使用css和js给按钮添加微交互的几种方式,css,css,javascript,交互

带有伪元素的按钮悬停效果

我们将使用::before::after伪元素以及inset属性来创建一些漂亮的边框动画。

我们将逐步设置我们的样式,先设置button样式:

button {
  position: relative;
  background: transparent;
  padding: 15px 45px;
  border-radius: 15px;
  border: none;
  font-size: 1.5rem;
  color: #e0ffff;
  font-weight: 500;
  cursor: pointer;
  z-index: 1;
}

insert添加到::before该按钮的伪元素中。它的值为0px 50px,因此它仅适用于 y 轴(inset属性将元素水平和垂直地推离其父元素)

button::before {
  content: '';
  position: absolute;
  inset: 0px 50px;
  background: #42455a;
  transition: inset 350ms ease;
  z-index: -1;
}

::after伪元素将覆盖::before伪元素,留下一个inset大小的间隙,从而创建一个边框。

button::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 10px;
  background: #22232e;
  z-index: -1;
}

为了获得最终的外观,我们将添加<button>元素添加overflow: hidden。这将删除方角并完成该按钮的微交互。

整体代码:

button {
  position: relative;
  overflow: hidden;
  background: transparent;
  padding: 15px 45px;
  border-radius: 15px;
  border: none;
  font-size: 1.5rem;
  color: #e0ffff;
  font-weight: 500;
  cursor: pointer;
  z-index: 1;
}
button:active{
  transform: scale(0.95);
}
button::before{
  content: '';
  position: absolute;
  inset: -3px 50px;
  background: #42455a;
  transition: inset 350ms ease;
  z-index: -2;
}
button:hover::before{
  inset: -20px 0px;
  background: #00c2cb;
}
button::after{
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 10px;
  background: #22232e;
  z-index: -1;
}

使用css和js给按钮添加微交互的几种方式,css,css,javascript,交互

涟漪微交互

我们将在单击按钮时为其添加涟漪效果。它可以位于按钮内或按钮周围。

我们将使用一些 JavaScript 来创建这种微交互。设置按钮样式后的 JavaScript 代码如下:

let btn = document.querySelectorAll("button");
btn.forEach((btn) => {
  btn.onclick = function (e) {
    let x = e.pageX - e.target.offsetLeft;
    let y = e.pageY - e.target.offsetTop;
    let ripples = document.createElement("span");

    ripples.style.left = x + "px";
    ripples.style.top = y + "px";
    this.appendChild(ripples);

    setTimeout(() => {
      ripples.remove();
    }, 2000);
  };
});

click 函数跟踪鼠标单击的 xy 位置并创建一个新<span>元素。每个都<span>代表一个涟漪,之后使用setTimeout()方法在两秒后将其删除。

我们使用 CSS 动画来更改其大小和不透明度。这将产生连锁反应。

button{
  position: relative;
  padding: 15px 45px;
  font-size: 1.5rem;
  border-radius: 15px;
  border: none;
  background: #00c2cb;
  color: #22232e;
  overflow: hidden;
  cursor: pointer;
}
button span {
  position: absolute;
  background: #004958;
  transform: translate(-50%,-50%);
  pointer-events: none;
  border-radius: 50%;
  animation: ripple 2s linear infinite;
  transition: 0.5s;
}

@keyframes ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0.5;
  }
  100% {
    width: 500px;
    height: 500px;
    opacity: 0;
  }
}

使用css和js给按钮添加微交互的几种方式,css,css,javascript,交互

发光

让按钮在悬停时发光。我们需要伪元素和box-shadow属性的组合。

<button><span class="btn-text">Click me</span></button>
button {
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  position: relative;
  background: #22232e;
  border: none;
  border-radius: 15px;
}
button .btn-text{
  padding: 14px 45px;
  font-size: 25px;
  color: #e0ffff;
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 15px;
  backdrop-filter: blur(15px);
  background: rgba(0,73,88,0.05);
  cursor: pointer;
  z-index: 1;
  transition: 0.2s;
}

此时,我们应该有一个看起来很普通的按钮。要在底部添加栏,我们将使用::before伪元素:

button::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -5px;
  width: 25%;
  height: 10px;
  background: #00c2cb;
  border-radius: 10px;
  transition: .5s;
  box-shadow: 0 0 10px rgba(0,194,203,0.5);
}

添加box-shadow了就有了发光效果。

为了完成这个微交互,我们将增加悬停时伪元素的大小

button:hover::before {
  bottom: 0;
  height: 40%;
  width: 90%;
  border-radius: 30px;
  transition-delay: 0.5s;
}

整体代码:

button {
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  position: relative;
  background: #22232e;
  border: none;
  border-radius: 15px;
}
button .btn-text{
  padding: 14px 45px;
  font-size: 25px;
  color: #e0ffff;
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 15px;
  backdrop-filter: blur(15px);
  background: rgba(0,73,88,0.05);
  cursor: pointer;
  z-index: 1;
  transition: 0.2s;
}
button::before{
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -5px;
  width: 25%;
  height: 10px;
  background: #00c2cb;
  border-radius: 10px;
  transition: .5s;
  box-shadow: 0 0 10px rgba(0,194,203,0.5);
}
button:hover::before{
  bottom: 0;
  height: 40%;
  width: 90%;
  border-radius: 30px;
  transition-delay: 0.5s;
}

使用css和js给按钮添加微交互的几种方式,css,css,javascript,交互文章来源地址https://www.toymoban.com/news/detail-621531.html

到了这里,关于使用css和js给按钮添加微交互的几种方式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JavaScript打开新窗口的几种方式

    window.location.href window.open 指定参数 NewUrl //’ 弹出窗口的地址; ‘newwindow’ //弹出窗口的名字,非必须,可用空’\\\'代替; height=600 //窗口高度; width=900 //窗口宽度; top=0 //窗口距离屏幕上方的象素值; left=0 //窗口距离屏幕左侧的象素值; toolbar=no //是否显示工具栏,yes为显示

    2024年02月14日
    浏览(39)
  • JavaScript里实现继承的几种方式

    JavaScript 中的继承可以通过以下几种方式来实现: 1、原型链继承 :通过将子类的原型对象指向父类的实例来实现继承。这种方式的优点是实现简单,缺点是父类的私有属性和方法子类是不能访问的。   2、借用构造函数继承 :通过在子类的构造函数中调用父类的构造函数来

    2023年04月23日
    浏览(50)
  • jQuery之添加节点的几种方式

    目录 一、append() 1、基本使用 2、获取一个dom节点然后通过追加到指定元素里面,相当于把这个元素剪切,然后作为追加指定元素中的最后一个子元素 二、prepend() 三、before() 四、after() 五、appendTo() 1、基本使用 把元素追加到父元素里面,并且是最后一个 2、获取一个dom节点然

    2024年02月09日
    浏览(55)
  • JavaScript 判断是否为数字的几种方式

    喜欢博主的文章,欢迎关注、点赞👍、收藏⭐️、留言📝支持,谢谢大家 js判断是否为数字的方式很多: typeof 、 instanceof 、 Number.isNumber parseInt 、 parseFloat isNaN 、 isFinite Number.isNaN 、 Number.isFinite 正则表达式 终极方案 我们逐一介绍,希望能帮到大家。 typeof 判断值是不是基

    2023年04月10日
    浏览(63)
  • CSS中常用的几种定位方式

    定位的基本语法: 有常用的几种方式,如下: 首先,相对,就是相对某一位置,这里指的是 相对原来的位置 , 不脱离标准文档流 。 那么标准文档流是什么? 就是元素排版布局过程中,元素会默认自动从左往右,从上往下的流式排列方式。并最终窗体自上而下分成一行行

    2024年02月05日
    浏览(48)
  • 把代码添加到git库的几种方式

    把一个新的代码工程提交到git服务器上,有几种情况: 1)先有git库,后添加代码:在服务器上创建一个空仓库,本地拉取下来。创建、编写源文件后,提交代码。 2)已有本地代码,添加到远程代码库:本地已经创开发好代码,在代码目录中init一个本地git库,然后把git远程

    2024年02月08日
    浏览(95)
  • css垂直水平居中的几种实现方式

    一、固定宽高: 1、定位 + margin-top + margin-left 设置父元素的position为相对定位,子元素绝对定位,并在 top 和 left 方向上移动父元素50%的距离。 但这个时候,是子元素的上边框和左边框距离父元素150px,整体向右下角偏了一些,所以还需要再用 margin 调整至中心位置,数值分别

    2024年01月18日
    浏览(45)
  • CSS中隐藏页面元素的几种方式和区别

    前言、 在平常的样式排版中,我们经常遇到将某个模块隐藏的场景,通过css隐藏的元素方法有很多种,它们看起来实现的效果是一致的,但实际上每一种方法都有一丝轻微的不同,这些不同决定了在一些特定场合下使用哪一种方法。 实现方法综合、 通过css实现隐藏元素方法

    2024年01月20日
    浏览(70)
  • js删除数组的几种方式

    注意: 此方法改变数组的长度! 提示: 移除数组末尾的元素可以使用 pop() 方法。 slice() 方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。 注意: slice() 方法不会改变原始数组。 注意:这种方法会改变原始数组。 返回值 如果删除一个元素,则返回一个元素

    2024年02月16日
    浏览(40)
  • js常用的几种排序方式

    在JavaScript中,有多种排序方式可供选择。以下是几种常见的排序方式以及对应的示例: 冒泡排序(Bubble Sort): 冒泡排序是一种比较简单的排序算法,它重复地比较相邻的两个元素并交换位置,直到整个数组排序完成。 插入排序(Insertion Sort): 插入排序的思想是将数组分

    2024年02月14日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包