[前端] 分享三个常用简约按钮组件 样式美观 动画丝滑 二（附代码）
飛_ 2024-10-17 09:33:02 阅读 65
[前端] 分享三个常用简约按钮组件 样式美观 动画丝滑 一（附代码）
指路：[前端] 分享四个常用炫彩按钮组件 样式美观 动画丝滑 一（附代码）
寻思了寻思，炫彩按钮好看归好看，在开发过程中却很少有机会使用，所以今天分享三个常用的简约系按钮组件，样式美观，动画丝滑。保证能用到
支付宝支付
效果：
代码：
<code><template>
<div class="alipay-button">code>
<svg
t="1726906240582"code>
class="icon"code>
viewBox="0 0 1024 1024"code>
version="1.1"code>
xmlns="http://www.w3.org/2000/svg"code>
p-id="2765"code>
width="200"code>
height="200"code>
fill="currentColor"code>
>
<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"code>
p-id="2766"code>
></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>
微信支付
效果：
代码：
<code><template>
<div class="wxpay-button">code>
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200" fill="currentColor">code>
<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"code>
p-id="4303"code>
></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>
立刻购买
效果：
代码：
<code><template>
<div class="shop-button">code>
<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>
总结
使用之前：
了解vue中关于组件的说明。了解vue中组件的引用方式。了解vue中各个部分的作用，需要对vue内置功能进行学习。对按钮中示例js进行修改，没必要传递事件给上级组件。需要在使用按钮的文件中添加相关引用，并且引入组件。根据项目需求进行修改
希望大家使用顺利，一起进步，一起学习。
相关资源：前端资源 纯css实现的3个简约vue组件按钮 动画丝滑 样式美观 使用方便 支持拓展 使用HTML 无JavaScript
系列文章：[前端] 分享四个常用炫彩按钮组件 样式美观 动画丝滑 一（附代码）
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。