怎么给按钮添加CSS样式?

Posted 2023-04-17

参考技术A

给按钮添加css样式的方法：

添加方法：

1、.btn BORDER-RIGHT: #7b9ebd 1px solid; 右边线

2、PADDING-RIGHT: 2px; 内边距 右

3、BORDER-TOP: #7b9ebd 1px solid; 上边线

4、PADDING-LEFT: 2px; 内边距 左

5、FONT-SIZE: 12px; 文字大小

6、BORDER-LEFT: #7b9ebd 1px solid; 左边线

7、CURSOR: hand; 鼠标移上去时，变成手形。

8、COLOR: black; 颜色黑 （表示文字颜色）

9、PADDING-TOP: 2px; 内边距 上

10、BORDER-BOTTOM: #7b9ebd 1px solid 底边线

扩展资料

CSS样式部分

大小 font-size: 12px，x-large;(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD

样式 font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)

行高 line-height: normal;(正常) 单位：PX、PD、EM

粗细 font-weight: bold;(粗体) lighter;(细体) normal;(正常)

变体 font-variant: small-caps;(小型大写字母) normal;(正常)

大小写 text-transform: capitalize;(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)

修饰 text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)

常用字体： (font-family)

"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana

背景属性： (background)

色彩 background-color: #FFFFFF;

图片 background-image: url();

重复 background-repeat: no-repeat;

滚动 background-attachment: fixed;(固定) scroll;(滚动)

位置 background-position: left;(水平) top(垂直);

字间距 letter-spacing: normal; 数值 /*这个属性有用，多实践下*/

对齐 text-align: justify;(两端对齐) left;(左对齐) right;(右对齐) center;(居中)

WordPress - 如何将 CSS 样式添加到所有标题菜单按钮，同时排除一个

【中文标题】WordPress - 如何将 CSS 样式添加到所有标题菜单按钮，同时排除一个

【英文标题】：WordPress - How to add CSS style to all header menu buttons whilst excluding one

【发布时间】：2019-02-12 05:47:28

【问题描述】：

我正在开发一个网站（使用 WordPress），我想将自定义 CSS 添加到所有菜单页面按钮，但一个页面按钮 (Contact) 已经拥有自己的独立 CSS 样式。

CSS 在悬停的菜单项正下方添加了一条看起来从左到右增长的线。它还会在活动页面链接的正下方设置一条静态线。

Hover Effect

我从这里得到这个代码：https://www.elegantthemes.com/blog/divi-resources/beautiful-css-hover-effects-you-can-add-to-your-divi-menus

那么如何将它添加到除“联系”按钮之外的所有菜单按钮？

下面是代码：

#top-menu .current-menu-item a::before,
#top-menu .current_page_item a::before 
 content: "";
 position: absolute;
 z-index: 2;
 left: 0;
 right: 0;

#top-menu li a:before 
 content: "";
 position: absolute;
 z-index: -2;
 left: 0;
 right: 100%;
 bottom: 50%;
 background: #15bf86; /*** COLOR OF THE LINE ***/
 height: 3px; /*** THICKNESS OF THE LINE ***/
 -webkit-transition-property: right;
 transition-property: right;
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -webkit-transition-timing-function: ease-out;
 transition-timing-function: ease-out;

#top-menu li a:hover 
 opacity: 1 !important;

#top-menu li a:hover:before 
 right: 0;

#top-menu li li a:before 
 bottom: 10%;

为每个特定按钮编写此代码而不为“联系”按钮编写代码会更好吗？如果可以，我该怎么做？

有什么建议吗？提前致谢

【参考方案1】：

您可以通过:not 处理您的案件：

为您的Contact 项目添加特异性（比如说exclude-style 类） 更改您显示的 CSS 选择器，使每个 a:*** 变为 a:not(.exclude-style):***

像这样：

#top-menu .current-menu-item a:not(.exclude-style)::before

#top-menu li a:not(.exclude-style):before

#top-menu li a:not(.exclude-style):hover

#top-menu li a:not(.exclude-style):hover:before

#top-menu li li a:not(.exclude-style):before

【讨论】：

谢谢，我实际上是从Divi自己那里得到答案的，答案和你的一样，但你把它分解得更多了。再次感谢您的全面回答。

【参考方案2】：

你需要做的是找到默认样式，所以删除上面的规则，直到你为Contact按钮找到你想要的样式。复制这些样式，并将它们放入带有#contact 选择器的规则中，并将contact 的ID 属性放在您的Contact 按钮上，如下所示：<a href="contact.html" id="contact">Contact</a> 或您的Contact 项目是什么。然后使用以下 CSS：

#contact 
    /*Styles on the Contact button only, for example: */
    background-color: orange;

这些样式只会应用于Contact 按钮。您可以将其他按钮的样式放回原处，只需确保将它们高于新的#contact 规则，这样它就会覆盖它们并且您的页面看起来像您想要的那样它到。

【讨论】：

感谢您的回答，我与 Divi 支持人员进行了交谈，这帮助了我，但我会记住您的回答，以防再次出现类似问题。