css按钮echohoo |dwcss中的选择器有哪些

// HTML 代码
<button class="btn-primary">Click me!</button>
// CSS 代码
.btn-primary {
background-color: #007bff;
border: none;
padding: 12px 24px;
color: #fff;
font-size: 16px;
border-radius: 4px;
box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

首先大家创建一个 button 元素，并为它添加一个 class 为 btn-primary。然后大家定义了按钮的样式。背景颜色为蓝色（#007bff），边框为无，内边距为 12px 上下，24px 左右，文字颜色为白色，字体大小为 16px，边框半径为 4px，以及一个阴影。

接下来，大家可以再添加一些样式来增强按钮的交互效果。

// HTML 代码
<button class="btn-primary btn-hover">Click me!</button>
// CSS 代码
.btn-hover {
transition: all 0.3s ease;
cursor: pointer;
}
.btn-hover:hover {
background-color: #0062cc;
}

大家为按钮添加了一个新增的 class 为 btn-hover，以区分大家之前定义的 btn-primary 样式。大家给按钮添加了一个 0.3 秒的过渡效果，并将鼠标指针更改为手形以增强用户体验。大家还定义了鼠标悬停在按钮上时的样式，将背景颜色更改为稍稍更深的蓝色（#0062cc）。

最后，大家可以将大家的按钮添加到页面中，它将成为一个漂亮、实用且易于使用的按钮。

// HTML 代码
<div class="wrapper">
<button class="btn-primary btn-hover">Click me!</button>
</div>
// CSS 代码
.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

这里大家添加了一个 wrapper，将按钮居中并垂直居中于页面。

这就是使用 echohoo 创建按钮的全部步骤。echohoo 不仅使大家的代码更简单、易于维护，同时也增加了大家页面的可读性。