CSS例子: 胶囊按钮

HTML

复制代码
<button class="btn">SEARCH</button>

CSS

复制代码
	.btn {
		width: 200rpx;
		height: 80rpx;
		border: none; 
		border-radius: 40rpx;
		background-color: burlywood;
	} 

tailwind css

复制代码
<button class="w-[200rpx] h-[80rpx] border-none rounded-[40rpx] bg-green-600">SEARCH</button>
相关推荐
亦世凡华、17 分钟前
Rollup入门与进阶:为现代Web应用构建超小的打包文件
前端·经验分享·rollup·配置项目·前端分享
Bl_a_ck43 分钟前
【React】Craco 简介
开发语言·前端·react.js·typescript·前端框架
为美好的生活献上中指1 小时前
java每日精进 5.11【WebSocket】
java·javascript·css·网络·sql·websocket·网络协议
augenstern4162 小时前
webpack重构优化
前端·webpack·重构
海拥✘2 小时前
CodeBuddy终极测评:中国版Cursor的开发革命(含安装指南+HTML游戏实战)
前端·游戏·html
寧笙(Lycode)2 小时前
React系列——HOC高阶组件的封装与使用
前端·react.js·前端框架
asqq82 小时前
CSS 中的 ::before 和 ::after 伪元素
前端·css
拖孩3 小时前
【Nova UI】十五、打造组件库之滚动条组件(上):滚动条组件的起步与进阶
前端·javascript·css·vue.js·ui组件库
Hejjon3 小时前
Vue2 elementUI 二次封装命令式表单弹框组件
前端·vue.js
小堃学编程4 小时前
前端学习(3)—— CSS实现热搜榜
前端·学习