CSS按钮样式如何设计 按钮样式设计方法

结论：加载代码即可，效果直观。

基本风格： CSS .按钮{ 背景颜色：4 CAF5 0； 边框：无； 颜色: 白色; 内边距：1 5 像素 3 2 像素； 文本对齐：居中； 文本装饰：无； 显示：内联块； 字体大小：1 6 px； 边距：4 像素 2 像素； 光标：指针； 边框半径：5 px；
指向状态： CSS .button:悬停{ 背景颜色：3 e8 e4 1 ； 盒子阴影：0 2 px 4 px rgba(0,0,0,0.2 );
活跃状态： CSS .按钮：活动{ 背景颜色：3 e8 e4 1 ； 框阴影：插图 0 2 px 4 px rgba(0,0,0,0.2 )；
阴影效果： CSS .按钮{ 盒子阴影：0 4 px 8 px 0 rgba(0,0,0,0.2 ); }
.button:悬停{ 框阴影：0 8 px 1 6 px 0 rgba(0,0,0,0.2 );
边框样式： CSS .按钮{ 边框：2 px实心4 CAF5 0；
字体和文字： CSS .按钮{ 字体系列：Arial、无衬线字体； 字体大小：1 8 px； 字体粗细：粗体； 文本转换：大写；
按钮类型: CSS .primary-button { 背景颜色：007 bff； 颜色: 白色; }
.第二个按钮{ 背景颜色：6 c7 5 7 d； 颜色: 白色; }
.警报按钮{ 背景颜色：dc3 5 4 5 ； 颜色: 白色;
响应式设计： CSS .按钮{ 内边距：1 0px 2 0px； }
@media（最大宽度：7 6 8 px）{ .按钮{ 内边距：1 5 像素 3 0 像素； 字体大小：1 .2 em； }
辅助功能： CSS .按钮{ 颜色：FF； 背景颜色：007 bff； }
<button class="button" aria-label="提交表单">提交</button>
键盘操作： CSS .button:焦点{ 概要：无； 盒子阴影：0 0 0 3 px rgba(0,1 2 3 ,2 5 5 ,0.5 ); }
.button:活动{ 概要：无；
预处理器（Sass）： 嘘 $主色：007 bff； $第二个颜色：6 c7 5 7 d;
按钮样式 @mixin($bg-color, $text-color) { 背景颜色：$bg-颜色； 颜色：$文本颜色； 内边距：1 0px 2 0px； 边框半径：5 px； 边框：无； 光标：指针； &:合法{ 不透明度：0.8 ； } }
.主按钮{ @include 按钮样式($primary-color, fff); }
.第二个按钮{ @include 按钮样式($secondary-color, fff);
直接使用此代码，效果立竿见影。

css 三种样式，哪一种使用度高

说到这里，外部和内部样式表确实是网页设计中的老朋友了。
过去十年我一直在访问问答论坛，并看到了许多用例。

说实话，使用外部样式表还是挺方便的。
就像我帮助客户创建一个网站一样。
当时整个网站有几十个页面，统一风格是一个很大的工程。
我们只是使用外部样式表。
如果我们改变一个文件，整个网站的风格就会改变，省时省力。
每个页面都使用 <link> 标记来提供到样式表的简单、清晰的链接。

有趣的是，内部样式表是个人秘密。
当页面需要特别关注时，例如需要突出显示某个元素，我们将使用内部样式表。
当时我也在文档头中使用了