我想创建一个关于我们的按钮，其中不填充颜色只需要在“关于我们”文本周围有边框
我正在尝试创建一个没有填充颜色的按钮，但另一个有填充颜色的按钮两者的大小不同。与另一个有填充颜色的按钮相比，没有填充颜色的按钮看起来很小。
要使按钮大小相同，无论一个按钮有填充颜色而另一个没有，您都应该为两个按钮指定相同的内边距、边框和字体大小。没有填充的按钮可能看起来更小，因为它缺少背景颜色。 以下是如何使用 CSS 来设置两个按钮的样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.btn {
padding: 10px 20px;
font-size: 16px;
border-radius: 5px;
border: 2px solid transparent; /* Initial border setup */
display: inline-block;
text-align: center;
}
.btn-filled {
background-color: #3498db;
color: white;
border-color: #3498db; /* Ensure border matches fill */
}
.btn-outline {
background-color: transparent;
color: #3498db;
border-color: #3498db; /* Match border color */
}
</style>
</head>
<body>
<button class="btn btn-filled">Filled Button</button>
<button class="btn btn-outline">About us</button>
</body>
</html>