css button内凹 |css3 font连写

内凹按钮

首先，在HTML中创建一个按钮，并为其添加一个类名“button-concave”。

.button-concave{
background-color: #ccc;
border: none;
border-bottom: 4px solid #aaa;
box-shadow: inset 0 -3px 0 #aaa;
font-size: 20px;
padding: 10px 30px;
}

然后，在CSS中为按钮添加样式，实现内凹的效果。具体样式如下：

• 背景颜色：给按钮设定背景颜色，这里大家选用灰色的色值“#ccc”；
• 边框：给按钮去掉边框和圆角，只保留下边框，并设定边框粗细为4px，颜色为深灰色“#aaa”；
• 内凹阴影：通过box-shadow属性，添加一个内凹的阴影效果，让按钮看起来向内凹陷；
• 字体大小：设置按钮中文字的大小，这里大家选用20px；
• 内边距：为了让按钮文字与四周有一定的间隔，需要设置内边距，这里设定10px 30px。

通过以上样式设置，大家就成功实现了CSS Button内凹的效果。你可以在自己的网站页面中尝试使用这种简洁而美观的按钮样式，为用户带来更好的浏览体验。