效果动图:
代码示例:
<!DOCTYPE html>
<html>
<head>
<style>
button:hover{
background: #ccc;
}
.ntrol-layout .cheader .menu-bottom .ht-button {
min-width: 96px;
position: relative;
}
.ht-button--small {
padding: 6px 15px;
font-size: 14px;
border-radius: 4px;
}
.ht-button {
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #fff;
border: 1px solid #ccc;
border-color: #ccc;
color: #333;
-webkit-appearance: none;
text-align: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: none;
margin: 0;
-webkit-transition: .1s;
transition: .1s;
font-weight: 400;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
padding: 6px 15px;
font-size: 14px;
border-radius: 4px;
}
</style>
</head>
<body>
<p><b>注释:</b>:hover 按钮悬停样式。</p>
<button type="button" name="button" class="ht-button ht-button--default ht-button--small">我是按钮</button>
</body>
</html>