uniapp——漂亮的按钮，圆角view，渐变色view，圆角边框view，点击效果波动、点击放大效果

最新推荐文章于 2025-03-25 10:36:07 发布

wy313622821

最新推荐文章于 2025-03-25 10:36:07 发布

阅读量2.6w

点赞数 17

分类专栏： uni-app

本文链接：https://blog.youkuaiyun.com/wy313622821/article/details/110475509

版权

uni-app 专栏收录该内容

32 篇文章

订阅专栏

该博客主要介绍前端界面元素的样式与交互效果。涵盖漂亮按钮（圆角、边框按钮）、圆角view按下变色、圆角边框、渐变色，以及点击效果波动和点击放大效果，还给出了部分代码和效果图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、漂亮的按钮

a、圆角按钮

在这里插入图片描述

template

<button class="button-yuanjiao" hover-class="bg-click">圆角按钮</button>

style

.button-yuanjiao {
		width: 200rpx;
		height: 50rpx;
		display: flex;
		margin-top: 30rpx;
		line-height: 50rpx;
		justify-content: center;
		border-radius: 25px;
		/* 这里可以改成渐变： background:linear-gradient(to right, #FFDE28,#FF3228) */
		background-color: #ff5500;
		font-size: 28rpx;
	}
.bg-click {
		background-color: #a7a9ff;
	}

b、边框按钮

在这里插入图片描述
template

<button class="button-biankuang" hover-class="bg-click">边框按钮</button>

style

.button-biankuang{
		width: 200rpx;
		height: 50rpx;
		display: flex;
		margin-top: 30rpx;
		line-height: 50rpx;
		justify-content: center;
		border-radius: 25px;
		border: 3rpx solid #6699FF;
		font-size: 28rpx;
	}
.bg-click {
		top: 3upx;
		background-color: #a7a9ff;
	}

2、圆角view，按下变背景色

在这里插入图片描述
template

<view class="view-yuanjiao" hover-class="bg-click"> {{title}} </view>

style

.view-yuanjiao {
		width: 200rpx;
		height: 50rpx;
		display: flex;
		justify-content: center;
		border-radius: 25px;
		background-color: #007AFF;
	}
.bg-click{
	top: 3upx;
	background-color: #a7a9ff;
}

3、圆角边框

在这里插入图片描述
template

<view class="view-biankuang" > 边框view </view>

style

.view-biankuang{
		width: 200rpx;
		height: 50rpx;
		display: flex;
		margin-top: 30rpx;
		justify-content: center;
		border-radius: 25px;	
		border: 3rpx solid #6699FF;
	}

4、渐变色

从左往右的渐变色：
在这里插入图片描述

//从上到下渐变
background: linear-gradient(blue, pink);
 
//从左往右渐变
background: linear-gradient(to right, blue, pink);
 
//对角线渐变，从左上到右下
background: linear-gradient(to bottom right, blue, pink);
 
//70度渐变角度
background: linear-gradient(70deg, blue, pink);

5、点击效果波动

效果图：
在这里插入图片描述
代码：

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>

		<view class="confirm bubble">确定</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				
			}
		},
		onLoad() {

		},
		methods: {
			
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}


/* 按钮 */
	.confirm {
		width: 325rpx;
		height: 80rpx;
		background: #07c160;
		border-radius: 6rpx;
		font-size: 30rpx;
		color: #fff;
		line-height: 80rpx;
		text-align: center;

	}

	.bubble {
		position: relative;
		overflow: hidden;
	}

	.bubble:after {
		content: "44444";
		background: #5c9899;
		position: absolute;
		width: 750rpx;
		height: 750rpx;
		left: calc(50% - 375rpx);
		top: calc(50% - 375rpx);
		opacity: 0;
		margin: auto;
		border-radius: 50%;
		transform: scale(1);
		transition: all 0.5s ease-in-out;
	}

	.bubble:active:after {
		transform: scale(0);
		opacity: 1;
		transition: 0s;
	}
</style>

6、点击放大效果

<view class="confirm " hover-class="hover1">放大</view>

.confirm {
		width: 325rpx;
		height: 80rpx;
		background: #07c160;
		border-radius: 6rpx;
		font-size: 30rpx;
		color: #fff;
		line-height: 80rpx;
		text-align: center;

	}
.hover1{
		transform: scale(1.1) !important;
	}