📌  相关文章
📜  材质图标按钮角度 - Javascript(1)

📅  最后修改于: 2023-12-03 15:26:33.928000             🧑  作者: Mango

材质图标按钮角度 - Javascript

在Web应用程序中，常常需要使用按钮来提供用户与网站的交互。按钮可以是纯文本、图像或两者的组合。材质UI是一个非常流行的UI框架，它提供了一套美丽、现代化的UI组件，其中包括按钮。这篇文章将教你如何创建材质UI风格的图标按钮。

基本的HTML和CSS样式

首先，让我们创建一个简单的HTML页面，并为按钮添加一些基本样式。为了使用材质UI图标，我们需要引用材质UI的CSS样式表和Icon font。

<!DOCTYPE html>
<html>
<head>
	<title>材质图标按钮角度 - Javascript</title>
	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
	<style>
		.btn {
			border-radius: 50px;
			padding: 0px 30px;
			text-transform: uppercase;
			font-weight: 600;
			letter-spacing: 2px;
			transition: all 0.2s ease;
			background-color: #26a69a;
			color: #ffffff;
			border: none;
			box-shadow: none;
		}

		.btn:hover {
			background-color: #2bbbad;
			box-shadow: none;
			transform: scale(1.05);
		}

		.btn i {
			font-size: 18px;
			vertical-align: middle;
			margin-right: 10px;
		}
	</style>
</head>
<body>
	<a href="#" class="btn"><i class="material-icons">add</i>添加</a>
</body>
</html>

以上代码定义了一个按钮样式，该样式应用于所有拥有“btn”类的元素。我们使用“border-radius”设置了按钮的圆角半径，使用“text-transform”将所有字母转换成大写字母，使用“font-weight”设置字体的粗细，使用“letter-spacing”设置字母之间的距离。我们还使用“transition”为按钮添加渐变效果。

按钮上的图标是使用材质UI提供的图标字体实现的。我们通过在按钮内添加一个“i”元素并设置它的“font-size”，来设置图标的大小。我们还使用“vertical-align”将图标垂直对齐，并使用“margin-right”调整图标和按钮文本之间的距离。

Javascript添加交互功能

现在，我们已经拥有一个带有材质UI样式的图标按钮，但按钮目前并没有具有交互功能。让我们使用Javascript来为按钮添加点击事件。我们将使用材质UI的“toast”组件，在点击按钮时显示一条消息。

<!DOCTYPE html>
<html>
<head>
	<title>材质图标按钮角度 - Javascript</title>
	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
	<style>
		.btn {
			border-radius: 50px;
			padding: 0px 30px;
			text-transform: uppercase;
			font-weight: 600;
			letter-spacing: 2px;
			transition: all 0.2s ease;
			background-color: #26a69a;
			color: #ffffff;
			border: none;
			box-shadow: none;
		}

		.btn:hover {
			background-color: #2bbbad;
			box-shadow: none;
			transform: scale(1.05);
		}

		.btn i {
			font-size: 18px;
			vertical-align: middle;
			margin-right: 10px;
		}
	</style>
</head>
<body>
	<a href="#" class="btn"><i class="material-icons">add</i>添加</a>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
	<script>
		document.querySelector('.btn').addEventListener('click', function() {
			M.toast({html: '添加成功！'});
		});
	</script>
</body>
</html>

在这里，我们使用了JavaScript的addEventListener函数，为按钮添加了一个“click”事件。当按钮被点击时，会调用一个函数，该函数使用材质UI的“toast”组件显示一条消息。

结论

现在您已经学会了如何创建材质UI风格的图标按钮，并为按钮添加了交互功能。你可以通过修改HTML和CSS样式和JavaScript代码，自定义和扩展按钮的功能和外观。