CSS按钮是网络界面设计中的常用元素之一。通过CSS，我们可以很容易地定义按钮的样式，包括大小、形状、背景颜色、字体颜色、鼠标悬停效果等。其中，按下边框效果是一种常见的按钮交互方式，通过它可以增强用户与页面的互动体验。

.btn {border: 1px solid #ccc; /* 按钮默认边框 */padding: 8px 16px; /* 按钮内边距 */border-radius: 4px; /* 按钮圆角 */background-color: #fff; /* 按钮背景颜色 */color: #333; /* 按钮字体颜色 */transition: all 0.3s ease; /* 按钮过渡效果 */}.btn:focus {outline: none; /* 焦点状态下去除默认边框 */}.btn:active {border-color: #f0f0f0; /* 激活状态下边框颜色 */box-shadow: inset 0 2px 4px rgba(0,0,0,0.15); /* 激活状态下内阴影 */}

上述代码是一个基础的按钮样式定义，其中利用了CSS的伪类选择器:focus和:active来实现焦点和激活状态下的按钮样式调整。

其中，:focus选择器用来去除按钮在获得焦点时的默认边框，这是因为不同浏览器对于:focus的默认边框样式可能存在差异，而这种差异是我们不需要的。使用outline:none可以统一去除这个差异。

:active选择器用来定义按钮被用户点击时的样式，包括边框颜色和内阴影效果。内阴影效果是通过box-shadow属性实现的，这个属性值包含四个参数：横向阴影距离、纵向阴影距离、阴影模糊半径和阴影颜色。其中，横向和纵向阴影距离越大，阴影越分散，模糊半径越大，阴影越模糊。

通过上述代码，我们可以很方便地定义一个美观且交互效果良好的按钮。但需要注意的是，CSS按钮样式的应用在不同的浏览器和设备上可能存在差异，需要进行兼容性处理。