CSS - buttons

上一页
下一页

按钮（ buttons ）是交互式元素，允许用户在您的网站或应用程序上执行操作。按钮的形状通常是矩形或圆形的，并有一个文本标签，说明当您单击它们时会发生什么。

在浏览网页时，您可能会遇到各种交互式元素，例如提交按钮。在本文中，我们将介绍如何使用 CSS 设置按钮样式，探索不同类型的按钮，并讨论相关属性。

如何在CSS中设置按钮的样式？

  • 设置尺寸：在 CSS 中，height 和 width 属性可用于调整网页中按钮的大小。
  • 定义颜色和边框：与 UI 兼容的颜色和具有适当厚度的边框使按钮脱颖而出。background-color 和 border 属性可用于为 css 中的任何按钮设置颜色和边框。
  • 阴影效果：使用 box-shadow 属性在按钮周围添加阴影效果可增强按钮样式。
  • 悬停效果：当用户将鼠标悬停在按钮上时，悬停效果等交互式样式会更改按钮的样式。这可能包括不透明度、大小（使用转换）等的变化。
  • 动画按钮：CSS 动画可用于创建动态交互式按钮。

设置按钮颜色

如上所述，我们可以在 CSS 中使用 background-color 属性为按钮提供正确的颜色。查看示例

例

在此示例中，我们使用具有不同颜色的样式按钮，这些按钮与背景颜色的UI匹配。


<!DOCTYPE html>	
<html>

<head>
	 	 <style>
	 	 	 	 body{
	 	 	 	 	 	 background: black;
	 	 	 	 	 	 padding: 40px;
	 	 	 	 }
	 	 	 	 button {
	 	 	 	 	 	 padding: 20px;
	 	 	 	 	 	 margin-bottom: 10px;
	 	 	 	 	 	 cursor: pointer;
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <button style="background: #FFD700">
	 	 	 	 Yellow Button
	 	 </button>
	 	 <button style="background: #00FFFF">
	 	 	 	 Blue Button
	 	 </button>
	 	 <button style="background: #FFFFFF">
	 	 	 	 White Button
	 	 </button>
	 	 <button style="background: #FF4500">
	 	 	 	 Orange Button
	 	 </button>
	 	 <button style="background: #32CD32">
	 	 	 	 Lime Button
	 	 </button>
</body>

</html>

设置按钮边框

边框是按钮边缘周围的空间。我们可以使用 border 属性来设置按钮边框的样式。

border 属性采用边框的厚度、类型和颜色三个值。

例

下面是一个示例，说明如何使用


<!DOCTYPE html>	
<html>

<head>
	 	 <style>
	 	 	 	 button {
	 	 	 	 	 	 font-size: 12px;
	 	 	 	 	 	 padding: 10px;
	 	 	 	 	 	 margin: 5px;
	 	 	 	 	 	 background-color: #f0f0f0;
	 	 	 	 }
	 	 	 	 .style1 {
	 	 	 	 	 	 border: 3px solid darkred;
	 	 	 	 }
	 	 	 	 .style2 {
	 	 	 	 	 	 border: 3px solid gold;
	 	 	 	 }
	 	 	 	 .style3 {
	 	 	 	 	 	 border: 3px solid black;
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <button class="style1">
	 	 	 	 darkred border
	 	 </button>
	 	 <button class="style2">
	 	 	 	 gold border
	 	 </button>
	 	 <button class="style3">
	 	 	 	 black border
	 	 </button>
</body>

</html>

创建圆角按钮

我们可以使用 border-radius 属性创建圆角按钮或完全圆形按钮。


/* Round cornered button */
border-radius: 10px;

/* Circular button */
border-radius: 50%;

例

以下是如何创建圆角按钮的示例。


<!DOCTYPE html>	
<html>

<head>
	 	 <style>
	 	 	 	 button {
	 	 	 	 	 	 font-size: 12px;
	 	 	 	 	 	 padding: 10px;
	 	 	 	 	 	 margin: 5px;
	 	 	 	 }
	 	 	 	 .style1 {
	 	 	 	 	 	 border-radius: 10px;
	 	 	 	 	 	 background-color: violet;
	 	 	 	 }
	 	 	 	 .style2 {
	 	 	 	 	 	 border-radius: 20px;
	 	 	 	 	 	 background-color: pink;
	 	 	 	 }
	 	 	 	 .style3 {
	 	 	 	 	 	 border-radius: 50%;
	 	 	 	 	 	 background-color: violet;
	 	 	 	 }
</style>
</head>

<body>
	 	 <button class="style1">
	 	 	 	 Border-radius: 10px;
	 	 </button>
	 	 <button class="style2">
	 	 	 	 Border-radius: 20px;
	 	 </button>
	 	 <button class="style3">
	 	 	 	 Circle
	 	 </button>
</body>

</html>

按钮悬停效果

将鼠标指针移动到按钮上方而不单击它称为悬停。我们可以使用 ：hover 伪类来设置按钮的悬停状态样式。


button:hover{
	 	 property: value;
}

例

下面是创建按钮悬停效果的示例。


<!DOCTYPE html>	
<html>

<head>
	 	 <style>
	 	 	 	 button {
	 	 	 	 	 	 font-size: 12px;
	 	 	 	 	 	 padding: 10px;
	 	 	 	 	 	 margin: 5px;
	 	 	 	 	 	 background-color: #1156b3; /* Darker blue */
	 	 	 	 }
	 	 	 	 .style1:hover {
	 	 	 	 	 	 background-color: #0069d9; /* Slightly darker blue */

	 	 	 	 }
	 	 	 	 .style2:hover {
	 	 	 	 	 	 transform: scale(1.2); /* Size increase effect */
	 	 	 	 }
	 	 	 	 .style3:hover {
	 	 	 	 	 	 background-color: lightblue;	
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <button class="style1">
	 	 	 	 Button 1
	 	 </button>
	 	 <button class="style2">
	 	 	 	 Button 2
	 	 </button>
	 	 <button class="style3">
	 	 	 	 Button 3
	 	 </button>
</body>

</html>

按钮焦点和主动样式

按钮的焦点状态是按钮聚焦时的状态，通常是在被单击或按 Tab 键进入之后。按钮的活动状态是单击按钮时的状态。我们可以使用伪类 ：focus 和 ：active 来设置这些状态的样式


button:focus {
	 	 property: value;
}
button:active {
	 	 property: value;
}

例

下面是按钮的焦点状态和活动状态示例。


<!DOCTYPE html>	
<html>

<head>
	 	 <style>
	 	 .style-button {
	 	 	 	 display: inline-block;
	 	 	 	 padding: 15px;
	 	 	 	 background-color: pink;
	 	 	 	 border: none;
	 	 	 	 border-radius: 5px;
	 	 	 	 cursor: pointer;
	 	 	 	 transition: background-color 0.3s ease, transform 0.1s ease;
	 	 }
	 	 .style-button:hover {
	 	 	 	 background-color: violet;
	 	 }
	 	 .style-button:focus {
	 	 	 	 outline: none;
	 	 	 	 box-shadow: 0 0 5px 2px blue;
	 	 }
	 	 .style-button:active {
	 	 	 	 	 	 transform: translateY(2px);
	 	 	 	 	 	 background-color: yellow;
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	<button class="style-button">Press Me</button>
</body>

</html>

在按钮上设置阴影效果

在 CSS 中，box-shadow 属性用于在按钮周围添加阴影效果。

框阴影由相对于元素的水平和垂直偏移、模糊和展开半径以及颜色来描述。以下是 box-shadow 的语法：


button {	
	 	 box-shadow: inset horizontal vertical
	 	 	 	 	 	 	 	 blur-radius spread-color;	
}

例

下面是如何创建带有投影的按钮的示例。


<!DOCTYPE html>	
<html>

<head>
	 	 <style>
	 	 	 	 button {
	 	 	 	 	 	 font-size: 12px;
	 	 	 	 	 	 padding: 10px;
	 	 	 	 	 	 margin: 5px;
	 	 	 	 }

	 	 	 	.style1 {
	 	 	 	 	 background-color: pink;
	 	 	 	 	 box-shadow: 0 5px 10px 0 red;	
	 	 	 	}
	 	 	 	.style2 {
	 	 	 	 	 background-color: yellow;
	 	 	 	}
	 	 	 	.style3:hover {
	 	 	 	 	 background-color: yellow;
	 	 	 	 	 box-shadow: 0 5px 10px 0 orange;
	 	 	 	}
	 	 </style>
</head>

<body>
	 	 <button class="style1">
	 	 	 	 Button 1
	 	 </button>
	 	 <button class="style2">
	 	 	 	 Button 2
	 	 </button>
	 	 <button class="style3">
	 	 	 	 Button 3
	 	 </button>
</body>

</html>

禁用的按钮

禁用的按钮是不可单击的按钮。当满足某些条件时，可以使用 JavaScript 启用此按钮。

我们可以通过将 cursor 属性设置为 not-allowed 来创建一个禁用按钮。

例

下面是一个示例。


<!DOCTYPE html>	
<html>

<head>
	 	 <style>
	 	 	 	 button {
	 	 	 	 	 	 font-size: 12px;
	 	 	 	 	 	 padding: 10px;
	 	 	 	 	 	 margin: 5px;
	 	 	 	 }

	 	 	 	 .style1 {
	 	 	 	 	 	 background-color: pink;
	 	 	 	 	 	 cursor: pointer;
	 	 	 	 }
	 	 	 	 .style2 {
	 	 	 	 	 	 background-color: yellow;
	 	 	 	 	 	 opacity: 0.5;
	 	 	 	 	 	 cursor: not-allowed;
	 	 	 	 }
	 	 </style>
</head>
<body>
	 	 <button class="style1">
	 	 	 	 Normal Button
	 	 </button>
	 	 <button class="style2">
	 	 	 	 Disabled Button
	 	 </button>
</body>
</html>

设置按钮宽度

我们可以使用 width 属性定义按钮的水平宽度。

例

下面是如何创建具有不同宽度的按钮的示例。


<!DOCTYPE html>	
<html>
<head>
	 	 <style>
	 	 	 	 button {
	 	 	 	 	 	 font-size: 12px;
	 	 	 	 	 	 padding: 10px;
	 	 	 	 	 	 margin: 5px;
	 	 	 	 }

	 	 	 	.style1 {
	 	 	 	 	 background-color: pink;
	 	 	 	 	 width: 200px;
	 	 	 	}
	 	 	 	.style2 {
	 	 	 	 	 background-color: violet;
	 	 	 	 	 width: 50%;
	 	 	 	}
	 	 	 	.style3 {
	 	 	 	 	 background-color: yellow;
	 	 	 	 	 width: 100%;
	 	 	 	}
	 	 </style>
</head>

<body>
	 	 <button class="style1">
	 	 	 	 width 100px
	 	 </button><br>
	 	 <button class="style2">
	 	 	 	 width 50%
	 	 </button><br>
	 	 <button class="style3">
	 	 	 	 width 100%
	 	 </button><br>
</body>

</html>

CSS 按钮组

以下示例演示了如何通过删除边距并向每个按钮添加 float： left 属性来创建水平按钮组。

例


<!DOCTYPE html>	
<html>
<head>
	 	 <style>
	 	 	 	.button-group {
	 	 	 	 	 display: flex;	
	 	 	 	 	 justify-content: center;
	 	 	 	 	 float: left;	
	 	 	 	}
	 	 	 	.style-button {
	 	 	 	 	 background-color: yellow;
	 	 	 	 	 border: none;
	 	 	 	 	 padding: 10px 20px;
	 	 	 	 	 float: left;
	 	 	 	 	 text-align: center;
	 	 	 	 	 text-decoration: none;
	 	 	 	 	 font-size: 16px;
	 	 	 	}
	 	 	 	.style-button:hover {
	 	 	 	 	 background-color: orange;
	 	 	 	}
	 	 </style>
</head>
<body>
	 	<div class="button-group">
	 	 	 <button class="style-button">Submit</button>
	 	 	 <button class="style-button">Cancel</button>
	 	 	 <button class="style-button">Reset</button>
	 	</div>
</body>
</html>

CSS 垂直按钮组

下面是一个示例，说明如何通过设置 display： block 和 float： left 属性来创建垂直按钮组

例


<!DOCTYPE html>	
<html>

<head>
	 	 <style>
	 	 .button-group {	
	 	 	 	 justify-content: center;
	 	 	 	 float: left;	
	 	 }
	 	 .style-button {
	 	 	 	 background-color: yellow;
	 	 	 	 border: 2px solid orange;
	 	 	 	 padding: 10px 20px;
	 	 	 	 text-align: center;
	 	 	 	 display: block;
	 	 	 	 text-decoration: none;
	 	 	 	 font-size: 16px;
	 	 	 	 width: 100px;	
	 	 }
	 	 .style-button:hover {
	 	 	 	 background-color: violet;
	 	 }
	 	 </style>
</head>

<body>
	 	 <div class="button-group">
	 	 	 	 <button class="style-button">Home</button>
	 	 	 	 <button class="style-button">Blog</button>
	 	 	 	 <button class="style-button">Setting</button>
	 	 </div>
</body>

</html>

图像上的 CSS 按钮

下面是一个示例，说明如何使用相对定位将按钮叠加在图像顶部

例


<!DOCTYPE html>	
<html>

<head>
	 	 <style>
	 	 	 	 .image-container {
	 	 	 	 	 	 position: relative;
	 	 	 	 	 	 display: inline-block;
	 	 	 	 }
	 	 	 	 img {
	 	 	 	 	 	 width: 300px;
	 	 	 	 	 	 height: 200px;
	 	 	 	 }
	 	 	 	 button {
	 	 	 	 	 	 position: absolute;
	 	 	 	 	 	 top: 40%;
	 	 	 	 	 	 left: 30%;
	 	 	 	 	 	 background-color: yellow;
	 	 	 	 	 	 border: none;
	 	 	 	 	 	 padding: 15px;
	 	 	 	 	 	 text-align: center;
	 	 	 	 	 	 text-decoration: none;
	 	 	 	 	 	 display: inline-block;
	 	 	 	 	 	 font-size: 15px;	
	 	 	 	 }
	 	 	 	 button:hover {
	 	 	 	 	 	 background-color: orange;
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <div class="image-container">
	 	 	 	 <img src="/css/images/tree.jpg" alt="Your Image">
	 	 	 	 <button>Click Me</button>
	 	 </div>
</body>

</html>

CSS 动画按钮

在CSS中，我们可以使用伪元素来动画按钮点击效果。

例

下面是如何在按钮上创建动画效果的示例


<!DOCTYPE html>	
<html>

<head>
	 	 <style>
	 	 	 	 button {
	 	 	 	 	 	 display: inline-block;
	 	 	 	 	 	 padding: 15px;
	 	 	 	 	 	 background-color: violet;
	 	 	 	 	 	 border: none;
	 	 	 	 	 	 text-align: center;
	 	 	 	 	 	 text-decoration: none;
	 	 	 	 	 	 font-size: 20px;
	 	 	 	 	 	 cursor: pointer;
	 	 	 	 	 	 position: relative;
	 	 	 	 	 	 overflow: hidden;
	 	 	 	 }
	 	 	 	 button::before {
	 	 	 	 	 	 content:"";
	 	 	 	 	 	 position: absolute;
	 	 	 	 	 	 width: 0;
	 	 	 	 	 	 height: 100%;
	 	 	 	 	 	 top: 0;
	 	 	 	 	 	 left: 0;
	 	 	 	 	 	 background-color: pink;
	 	 	 	 	 	 transition: width 0.3s ease-in-out;
	 	 	 	 }
	 	 	 	 button:hover::before {
	 	 	 	 	 	 width: 100%;
	 	 	 	 }
	 	 	 	 .icon::after {
	 	 	 	 	 	 content: '\2192';	
	 	 	 	 	 	 margin-left: 10px;
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <button>
	 	 	 	 Hover Me <span class="icon"></span>
	 	 </button>
</body>
</html>
打印本页
上一页
下一页