Question

我试图添加一个按钮，看起来像橙色的线条＆＃34;立即获取＆＃34;按钮位于此处：https://www.wpbeaverbuilder.com/

我在这个主题上找到的指南专注于我不会使用的特定主题，因此我目前陷入困境。我怎么能这样做？

感谢。

Answer 1

button {
    border: 0;
    background-color: #F7951E;
    color: #fff;
    padding: 6px 18px 3px;
    border-radius: 5px;
    border-bottom: 2px solid #D4821F;
    font-weight: 600;
    font-size: 14px;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
    top: 2px;
}

button:hover {
    color: #fff;
    background-color: #db7f0f;
    cursor: pointer;
}

您可以检查页面中的任何元素并查看它的css属性。

Answer 2

这是按钮的代码段。在wordpress的自定义样式上添加css，在菜单项中添加按钮的类。

不要对字体感到害怕，它会获得您主题中使用的字体。

＆＃13;

.menu-btn {
  background-color: #F7951E;
  color: #fff;
  padding: 6px 18px 3px !important;
  border-radius: 5px;
  border-bottom: 2px solid #D4821F;
  font-weight: 600;
  font-size: 14px;
  position: relative;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  top: 2px;
  text-decoration: none;
  transition: background .3s;
}

.menu-btn:hover {
  color: #fff;
  background-color: #D4821F;
}

＆＃13;

<a class="menu-btn" href="#"> Get It Now </a>

＆＃13;

编辑：

您网站的代码菜单：

.menu-btn {
  line-height: 1;
  margin-top: 25px;
  background-color: #F7951E;
  color: #fff !important;
  padding: 10px 18px 7px !important;
  border-radius: 5px;
  border-bottom: 2px solid #D4821F;
  font-weight: 600;
  font-size: 14px;
  position: relative;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  top: 2px;
  text-decoration: none;
  transition: background .3s;
}

添加样式化CSS按钮

2 个答案: