面试题：CSS中如何在CSS Foundation框架下实现一个可复用的按钮组件样式

Question

在CSS Foundation框架的组件化开发实践背景下，描述实现一个具有基本样式（如不同状态的颜色、边框等）且可复用的按钮组件的CSS代码思路，包括可能用到的选择器、属性等。

Answer 1

1. 基础样式设置

使用类选择器定义按钮的基本样式，例如 .button。设置 display 属性为 inline - block 或 block，根据需求决定按钮的显示类型。设置 padding 来调整按钮内边距，font - size 设置字体大小，text - align 使其文本居中。

.button {
    display: inline - block;
    padding: 10px 20px;
    font - size: 16px;
    text - align: center;
}

2. 颜色和边框样式

使用 background - color 设置背景颜色，border 设置边框。可以为不同状态分别设置，如默认状态、悬停状态、激活状态等。

• 默认状态：

.button {
    background - color: #007BFF;
    border: 1px solid #007BFF;
    color: white;
}

• 悬停状态：使用 :hover 伪类选择器。

.button:hover {
    background - color: #0056b3;
    border: 1px solid #0056b3;
}

• 激活状态：使用 :active 伪类选择器。

.button:active {
    background - color: #003f80;
    border: 1px solid #003f80;
}

3. 禁用状态样式

使用 :disabled 伪类选择器来设置按钮禁用时的样式，使其显示为灰色且不可点击。

.button:disabled {
    background - color: #ccc;
    border: 1px solid #ccc;
    color: #999;
    cursor: not - allowed;
}

4. 不同主题样式（可选）

如果需要实现不同主题的按钮，可以使用额外的类选择器，例如 .button - primary、.button - secondary 等。

.button - primary {
    background - color: #007BFF;
    border: 1px solid #007BFF;
    color: white;
}
.button - secondary {
    background - color: #6C757D;
    border: 1px solid #6C757D;
    color: white;
}

通过以上方式，可以创建一个具有基本样式且可复用的按钮组件。在实际使用中，将相应的类名添加到 HTML 按钮元素上即可应用这些样式。