Element Plus 按钮演示
约 244 字小于 1 分钟
2025-11-30
Element Plus 按钮演示
源代码可于右下角查看。
HTML
<body>
<button class="el-button">默认按钮</button>
<button class="el-button el-button--primary">主要按钮</button>
<button class="el-button is-disabled">禁用按钮</button>
</body>CSS
:root {
--el-primary: #409eff;
--el-primary-hover: #66b1ff;
--el-primary-active: #3a8ee6;
--el-text-color: #ffffff;
--el-border-radius: 4px;
--el-font-size: 14px;
--el-padding: 8px 16px;
}
.el-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--el-padding);
font-size: var(--el-font-size);
border-radius: var(--el-border-radius);
border: 1px solid #dcdfe6;
background-color: #ffffff;
color: #606266;
cursor: pointer;
transition: 0.2s;
user-select: none;
}
.el-button:hover {
border-color: #c6c8cc;
background-color: #f5f7fa;
}
.el-button:active {
background-color: #e6e8eb;
}
/* Primary Button */
.el-button--primary {
background-color: var(--el-primary);
border-color: var(--el-primary);
color: var(--el-text-color);
}
.el-button--primary:hover {
background-color: var(--el-primary-hover);
border-color: var(--el-primary-hover);
}
.el-button--primary:active {
background-color: var(--el-primary-active);
border-color: var(--el-primary-active);
}
/* Disabled */
.el-button.is-disabled,
.el-button.is-disabled:hover,
.el-button.is-disabled:active {
opacity: 0.6;
cursor: not-allowed;
background-color: #f5f7fa;
border-color: #e4e7ed;
color: #c0c4cc;
}