svg+css实现发送邮件按钮悬浮动画效果代码-html代码-BFW代码库

svg+css实现发送邮件按钮悬浮动画效果代码

代码语言：html

所属分类：悬停

代码描述：svg+css实现发送邮件按钮悬浮动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>


* {
  box-sizing: border-box;
}

:root {
  --speed: 0.25s;
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: hsl(0 0% 4%);
  font-family: "Geist Sans", sans-serif;
}

button {
  cursor: pointer;
  position: relative;
  display: flex;
  border: 1px solid hsl(0 0% 100% / 0.25);
  border-radius: 100px;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 3.5em;
  gap: 1.5em;
  font-family: "Geist Sans", sans-serif;
  font-weight: 80;
  background:
    hsl(280 0% 12%);
  color: hsl(0 0% 90%);
  padding: 0.5em 0.5em 0.5em 1.5em;
  place-items: center;
  box-shadow:
    0 1px inset hsl(0 0% 100% / 0.5),
    0 -10px 20px 10px hsl(0 0% 0% / 0.5) inset,
    0 10px 20px 10px hsl(0 0% 50% / 0.25) inset,
    0 1px hsl(0 0% 2% / 0.75);
  letter-spacing: 0.05ch;
}

button:focus-visible {
  outline-offset: 0.5em;
  outline-color: hsl(280 80% 80% / 0.5);
}

.icon {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 100%;
}

.backdrop {
  position: absolute;
  inset: 0.5em;
}

.icon {
  overflow: hidden;
}

.icon svg {
  width: 50%;
  overflow: visible !important;
}

svg path:nth-of-type(2) {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition:
    fill var(--speed),
    rotate var(--speed),
    scale var(--speed),
    translate var(--speed);
}

svg path:nth-of-type(1) {
  translate: 5rem 0;
  transform-box: fill-box;
  transition: translate var(--speed);
  opacity: 0.75;
}

button:is(:hover, :focus-visible) svg path:nth-of-type(2) {
  translate: 0 -50%;
  rotate: 290deg;
  scale: 0.65;
  fill: hsl(0 0% 20%);
  transition-timing-function: ease, ease, cubic-bezier(.2, .7, .9, 1.5);
}

button:is(:hover, :focus-visible) svg path:nth-of-type(1) {
  translate.........完整代码请登录后点击上方下载按钮下载查看