html 圆形按钮转为圆头按钮动画

最新推荐文章于 2024-08-14 12:55:09 发布

Zain_horse

最新推荐文章于 2024-08-14 12:55:09 发布

阅读量297

点赞数

分类专栏： css 文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/Zain_horse/article/details/126774363

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇博客展示了如何使用CSS创建一个从圆形渐变到圆头的按钮。通过设置`border-radius`、`transition`和`:hover`伪类，实现了按钮在鼠标悬停时的尺寸变化和颜色过渡。这个简单的例子对于前端开发者理解CSS动态效果很有帮助。

摘要由CSDN通过智能技术生成

这是一个从圆形按钮，渐变到圆头按钮，非常简单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#sss{
				width: 50px;
				height: 50px;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				border: 1px solid red;
				margin: 0 auto;
				font-size: small;
				border-radius: 50px;
				transition: all 0.3s linear;
				cursor: pointer;
			}
			
			#sss:hover{
				background-color: red;
				color: white;
				width: 300px;
			}
			
		</style>
	</head>
	<body>
		<div id="sss">登录</div>
	</body>
</html>