在设计按钮时,可以使用文本和图标的组合来提供更明确的按钮名称。下面是一个示例代码,使用了图标和文本来创建一个明确的按钮:
HTML代码:
CSS代码:
.icon-button {
display: flex;
align-items: center;
justify-content: center;
background-color: #f0f0f0;
border: none;
padding: 10px;
cursor: pointer;
}
.button-icon {
margin-right: 5px;
}
.button-label {
font-size: 14px;
font-weight: bold;
}
在上面的示例中,按钮以class="icon-button"
的形式定义,使用Flex布局使图标和文本居中对齐。图标和文本分别包含在元素中,可以根据需要进行样式调整。
这样设计的按钮,在视觉上清晰明确地显示了按钮的名称和图标,使用户能够更好地理解按钮的功能。