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

飛_

已于 2024-09-25 17:07:26 修改

阅读量1k

点赞数 16

文章标签：前端 html css3 css vue.js

于 2024-09-24 15:22:48 首次发布

本文链接：https://blog.csdn.net/fei_fei_123/article/details/142490799

版权

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

在这里插入图片描述

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

寻思了寻思，炫彩按钮好看归好看，在开发过程中却很少有机会使用，所以今天分享三个常用的简约系按钮组件，样式美观，动画丝滑。保证能用到

支付宝支付

效果：

在这里插入图片描述

代码：

<template>
  <div class="alipay-button">
    <svg
      t="1726906240582"
      class="icon"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="2765"
      width="200"
      height="200"
      fill="currentColor"
    >
      <path
        d="M230.771014 576.556522c-12.614493 9.646377-25.228986 23.744928-28.93913 42.295652-5.194203 24.486957-0.742029 55.652174 22.26087 80.13913 28.93913 28.93913 72.718841 37.101449 92.011594 38.585508 51.2 3.710145 106.110145-22.26087 147.663768-50.457971 16.324638-11.130435 43.77971-34.133333 70.492754-69.750725-59.362319-30.423188-133.565217-64.556522-212.22029-61.588406-41.553623 1.484058-70.492754 9.646377-91.269566 20.776812zM983.188406 712.347826c25.971014-61.588406 40.811594-129.113043 40.811594-200.347826 0-281.971014-230.028986-512-512-512S0 230.028986 0 512s230.028986 512 512 512c170.666667 0 321.298551-83.849275 414.794203-212.22029C838.492754 768.742029 693.797101 696.023188 604.011594 652.985507c-42.295652 48.973913-105.368116 97.205797-176.602898 117.982609-44.521739 13.356522-85.333333 18.550725-126.886957 9.646377-42.295652-8.904348-72.718841-28.197101-90.527536-47.489855-8.904348-10.388406-19.292754-22.26087-27.455073-37.843479 0.742029 0.742029 0.742029 2.226087 0.742029 2.968116 0 0-4.452174-7.42029-7.420289-19.292753-1.484058-5.936232-2.968116-11.872464-3.710145-17.808696-0.742029-4.452174-0.742029-8.904348 0-12.614493-0.742029-7.42029 0-15.582609 1.484058-23.744927 4.452174-20.776812 12.614493-43.77971 35.617391-65.298551 48.973913-48.231884 115.014493-50.457971 149.147826-50.457971 50.457971 0.742029 138.017391 22.26087 212.22029 48.973913 20.776812-43.77971 34.133333-89.785507 42.295652-121.692754H304.973913v-33.391304h158.052174v-66.782609H272.324638v-34.133333h190.701449v-66.782609c0-8.904348 2.226087-16.324638 16.324638-16.324637h74.944927v83.107246h207.026087v33.391304H554.295652v66.782609H719.768116S702.701449 494.933333 651.501449 586.202899c115.014493 40.811594 277.518841 104.626087 331.686957 126.144927z m0 0"
        p-id="2766"
      ></path>
    </svg>
    <slot>按钮</slot>
  </div>
</template>

<script>
export default {}
</script>

<style>
.alipay-button {
  --blue: rgb(90, 158, 247);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  width: 200px;
  border-radius: 25px;
  cursor: pointer;
  color: var(--blue);
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  overflow: hidden;
  position: relative;
  background: transparent;
  transition: all 0.3s ease;
  border: 1px solid var(--blue);
}

.alipay-button > svg {
  width: 30px;
  height: 30px;
  margin-right: 5px;
}

.alipay-button > slot {
  padding: 0 15px;
  width: 100%;
  text-align: center;
}

.alipay-button::before {
  content: '';
  position: absolute;
  right: -15em;
  bottom: -15em;

  display: block;
  width: 250px;
  height: 150px;
  z-index: -1;
  border-radius: 50%;
  background-color: var(--blue);
}

.alipay-button::before {
  top: 100%;
  left: 100%;
  transition: 0.3s all;
}

.alipay-button:hover::before {
  top: -3em;
  left: -2em;
}

.alipay-button:hover {
  color: white;
}
</style>

微信支付

效果：

在这里插入图片描述

代码：

<template>
  <div class="wxpay-button">
    <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200" fill="currentColor">
      <path
        d="M664.250054 368.541681c10.015098 0 19.892049 0.732687 29.67281 1.795902-26.647917-122.810047-159.358451-214.077703-310.826188-214.077703-169.353083 0-308.085774 114.232694-308.085774 259.274068 0 83.708494 46.165436 152.460344 123.281791 205.78483l-30.80868 91.730191 107.688651-53.455469c38.558178 7.53665 69.459978 15.308661 107.924012 15.308661 9.66308 0 19.230993-0.470721 28.752858-1.225921-6.025227-20.36584-9.521864-41.723264-9.521864-63.862493C402.328693 476.632491 517.908058 368.541681 664.250054 368.541681zM498.62897 285.87389c23.200398 0 38.557154 15.120372 38.557154 38.061874 0 22.846334-15.356756 38.156018-38.557154 38.156018-23.107277 0-46.260603-15.309684-46.260603-38.156018C452.368366 300.994262 475.522716 285.87389 498.62897 285.87389zM283.016307 362.090758c-23.107277 0-46.402843-15.309684-46.402843-38.156018 0-22.941502 23.295566-38.061874 46.402843-38.061874 23.081695 0 38.46301 15.120372 38.46301 38.061874C321.479317 346.782098 306.098002 362.090758 283.016307 362.090758zM945.448458 606.151333c0-121.888048-123.258255-221.236753-261.683954-221.236753-146.57838 0-262.015505 99.348706-262.015505 221.236753 0 122.06508 115.437126 221.200938 262.015505 221.200938 30.66644 0 61.617359-7.609305 92.423993-15.262612l84.513836 45.786813-23.178909-76.17082C899.379213 735.776599 945.448458 674.90216 945.448458 606.151333zM598.803483 567.994292c-15.332197 0-30.807656-15.096836-30.807656-30.501688 0-15.190981 15.47546-30.477129 30.807656-30.477129 23.295566 0 38.558178 15.286148 38.558178 30.477129C637.361661 552.897456 622.099049 567.994292 598.803483 567.994292zM768.25071 567.994292c-15.213493 0-30.594809-15.096836-30.594809-30.501688 0-15.190981 15.381315-30.477129 30.594809-30.477129 23.107277 0 38.558178 15.286148 38.558178 30.477129C806.808888 552.897456 791.357987 567.994292 768.25071 567.994292z"
        p-id="4303"
      ></path>
    </svg>
    <slot>按钮</slot>
  </div>
</template>

<script>
export default {}
</script>

<style>
.wxpay-button {
  --green: rgb(7, 193, 96);
  border: 1px solid var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  width: 200px;
  border-radius: 25px;
  cursor: pointer;
  color: var(--green);
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  overflow: hidden;
  position: relative;
  background: transparent;
  transition: all 0.3s ease;
}

.wxpay-button > svg {
  width: 30px;
}

.wxpay-button > slot {
  padding: 0 15px;
}

.wxpay-button::before {
  content: '';
  position: absolute;
  left: 0em;
  top: 0;
  right: 0;
  bottom: 0;

  display: block;
  width: 15em;
  height: 15em;
  z-index: -1;
  margin: auto;
  border-radius: 50%;

  transition: all 0.5s ease-out;
}

.wxpay-button:hover::before {
  box-shadow: inset 0 0 3px 15em var(--green);
}

.wxpay-button:hover {
  color: white;
}
</style>

立刻购买

效果：

在这里插入图片描述

代码：

<template>
  <div class="shop-button">
    <slot>按钮</slot>
  </div>
</template>

<script>
export default {}
</script>

<style>
.shop-button {
  --red: rgb(255, 80, 0);
  display: flex;
  align-items: center;
  justify-content: center;

  height: 50px;
  width: 200px;
  border-radius: 25px;
  cursor: pointer;
  border: 1px solid var(--red);

  background-color: white;
  color: var(--red);
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  overflow: hidden;

  position: relative;
  transition: all 0.3s ease;
}

.shop-button::before {
  content: '';
  position: absolute;
  width: 200px;
  height: 50px;
  border-right: 100px solid greenyellow;
  font-size: 18px;

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

  background: var(--red);
  color: white;
}

.shop-button::after {
  content: '立刻购买';
  color: white;
  position: absolute;
  top: 0;
  left: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 50px;
  background: transparent;
  opacity: 0;
  transition: all 0.6s ease;
}

.shop-button:hover::after {
  opacity: 1;
}

.shop-button::before {
  top: 0;
  left: -200%;
  transition: all 0.6s ease;
}

.shop-button:hover::before {
  left: 0;
}
</style>