18 悬浮按钮

效果演示

实现了一个按钮的悬浮效果，当鼠标悬停在按钮上时，按钮的背景颜色和边框半径会变大，同时按钮中的文字会变成白色。当鼠标点击按钮时，按钮会变得较小。

Code

<button class="cta">
    <span>Hover me</span>
    <svg viewBox="0 0 13 10" height="10px" width="15px">
        <path d="M1,5 L11,5"></path>
        <polyline points="8 1 12 5 8 9"></polyline>
    </svg>
</button>

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e8e8e8;
}

.cta {
    position: relative;
    margin: auto;
    padding: 12px 18px;
    transition: all 0.2s ease;
    border: none;
    background: none;
}

.cta:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border-radius: 50px;
    background: #b1dae7;
    width: 45px;
    height: 45px;
    transition: all 0.3s ease;
}

.cta span {
    position: relative;
    font-family: "Ubuntu", sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #234567;
}

.cta svg {
    position: relative;
    top: 0;
    margin-left: 10px;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: #234567;
    stroke-width: 2;
    transform: translateX(-5px);
    transition: all 0.3s ease;
}

.cta:hover:before {
    width: 100%;
    background: #b1dae7;
}

.cta:hover svg {
    transform: translateX(0);
}

.cta:active {
    transform: scale(0.95);
}

实现思路拆分

body {
  height: 100vh; /* 设置body高度为视口高度 */
  display: flex; /* 设置body元素为flex布局 */
  justify-content: center; /* 设置主轴居中对齐 */
  align-items: center; /* 设置交叉轴居中对齐 */
  background-color: #e8e8e8; /* 设置背景颜色为#e8e8e8 */
}

这段代码设置了整个页面的样式，包括高度、布局方式、对齐方式和背景颜色。

.cta {
  position: relative; /* 设置元素为相对定位 */
  margin: auto; /* 设置元素水平和垂直居中 */
  padding: 12px 18px; /* 设置元素内边距 */
  transition: all 0.2s ease; /* 设置过渡效果 */
  border: none; /* 设置边框为none */
  background: none; /* 设置背景为none */
}

这段代码设置了按钮的样式，包括位置、内边距、过渡效果、边框和背景。

.cta:before {
  content: ""; /* 设置伪元素的内容为空 */
  position: absolute; /* 设置伪元素为绝对定位 */
  top: 0; /* 设置伪元素距离顶部为0 */
  left: 0; /* 设置伪元素距离左侧为0 */
  display: block; /* 设置伪元素为块级元素 */
  border-radius: 50px; /* 设置伪元素的圆角半径为50px */
  background: #b1dae7; /* 设置伪元素的背景颜色为#b1dae7 */
  width: 45px; /* 设置伪元素的宽度为45px */
  height: 45px; /* 设置伪元素的高度为45px */
  transition: all 0.3s ease; /* 设置伪元素的过渡效果 */
}

这段代码设置了按钮的伪元素样式，包括内容、位置、大小、圆角半径、背景颜色和过渡效果。

.cta span {
  position: relative; /* 设置元素为相对定位 */
  font-family: "Ubuntu", sans-serif; /* 设置字体为Ubuntu */
  font-size: 18px; /* 设置字体大小为18px */
  font-weight: 700; /* 设置字体粗细为700 */
  letter-spacing: 0.05em; /* 设置字母间距为0.05em */
  color: #234567; /* 设置字体颜色为#234567 */
}

这段代码设置了按钮中的文字样式，包括位置、字体、字体大小、字体粗细、字母间距和字体颜色。

.cta svg {
  position: relative; /* 设置元素为相对定位 */
  top: 0; /* 设置元素距离顶部为0 */
  margin-left: 10px; /* 设置元素左侧外边距为10px */
  fill: none; /* 设置元素内部填充为none */
  stroke-linecap: round; /* 设置元素线帽为圆形 */
  stroke-linejoin: round; /* 设置元素线连接点为圆形 */
  stroke: #234567; /* 设置元素线条颜色为#234567 */
  stroke-width: 2; /* 设置元素线条宽度为2px */
  transform: translateX(-5px); /* 设置元素向左移动5px */
  transition: all 0.3s ease; /* 设置元素的过渡效果 */
}

这段代码设置了按钮中的图标样式，包括位置、内边距、填充、线帽、线连接点、线条颜色、线条宽度、移动距离和过渡效果。

.cta:hover:before {
  width: 100%; /* 设置伪元素的宽度为100% */
  background: #b1dae7; /* 设置伪元素的背景颜色为#b1dae7 */
}

这段代码设置了按钮悬停时的样式，包括伪元素的宽度和背景颜色。

.cta:hover svg {
  transform: translateX(0); /* 设置图标在悬停时向右移动0px */
}

这段代码设置了按钮悬停时图标向右移动的效果。

.cta:active {
  transform: scale(0.95); /* 设置按钮在点击时放大0.95倍 */
}

这段代码设置了按钮在点击时放大0.95倍的效果。