在Web设计中，按钮是一个非常常见的元素。为了让按钮具有美观的外观和好的用户体验，使用CSS来设置按钮样式是一个非常重要的方面。在这篇文章中，我们将介绍如何创建一个按钮，使用灰色边框的样式。

.button {display: inline-block;padding: 10px 20px;background-color: #FFFFFF;border: 2px solid #CCCCCC;color: #333333;text-align: center;text-decoration: none;font-size: 16px;font-weight: bold;border-radius: 4px;transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;}.button:hover {background-color: #CCCCCC;border-color: #999999;}

首先，我们使用CSS中的“display: inline-block”属性来设置我们的按钮为内联块元素，使它能够在一行内进行布局。然后使用“padding”属性来定义按钮的内边距，以便在按钮和文本之间留出一定的空间。

接着，我们使用“background-color”属性来设置按钮的背景颜色，并使用“border”属性来定义按钮的灰色边框。我们还设置了按钮的文本颜色，并将文本居中显示。我们选择使用粗体的字体和16像素的字号，以便使按钮的文本更加突出。

最后，我们使用“border-radius”属性来设置按钮的圆角，并使用CSS中的“transition”属性来定义按钮的过渡效果。当鼠标悬停在按钮上时，我们使用CSS中的伪类选择器“:hover”来改变按钮的背景颜色和边框颜色，以产生动态的效果。

以上就是如何创建一个灰色边框的CSS按钮，它既简单又美观。您可以根据您的需要进行调整，使按钮更能符合您的网站设计风格。希望本篇文章对您能有所帮助！