元件内的倾斜/倾斜按钮

时间:2021-06-16 作者:Ferwous

我接到一个客户关于歪斜/倾斜按钮的请求
I only want the background of the button to be skewed and the text to be normal

按钮正常:

Button

按钮悬停:

Button hover

这在Elementor内部是否可行?

I tried to following:
-像happy插件之类的插件(使用css转换功能,但它也会扭曲文本)
-自定义html/css按钮(我根本不擅长代码,所以我希望它尽可能对用户友好)
-带有悬停图像的列(似乎无法使其工作+工作流程不好)

非常感谢您的帮助!谢谢

1 个回复
最合适的回答,由SO网友:Kristián Filo 整理而成

您需要的是选择Elementor按钮并添加一个简单的自定义CSS。大体上what you need to do is to skew the button with the negative value, and then skew the inner text element with the positive value.

a.elementor-button {
  color: #fff;
  background: #000;
  border: 2px solid #000;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  outline: 0;
  font-size: 0.8rem;
  padding: 14px 35px;
  display: inline-block;
  transform: skew(-35deg); /* Negative skew for the button */
}

a.elementor-button > .elementor-button-content-wrapper {
  display: inline-block;
  transform: skew(35deg); /* Positive skew for inner text */
}
您可能还可以使用Elementor设置这些规则的大部分,并仅将自定义CSS用于倾斜。如果您已经使用Elementor设置了其中一些规则,并且需要使用自定义CSS覆盖它们,那么您可能需要使用!important 或一些更高优先级的选择器。

相关推荐

在带有WordPress子主题函数的插件css之后添加自定义css文件。php

我正在尝试为我的孩子主题创建一个css文件functions.php 在一个带有句柄的特定插件css文件之后openpos.bill.bootstrap. 不幸的是,当前代码没有加载任何内容。Any idea how to solve this problem?插件使用以下代码块加载样式public function initScripts(){ global $op_in_pos_screen; global $op_in_bill_screen; glo