时间戳

首页 > 解决方案 > 如何从网页复制 CSS 内容？

css - 如何从网页复制 CSS 内容？

问题描述

我被要求在我们的网页上创建这个按钮 这是我需要在我的网页中复制的按钮

我可以创建按钮，为其添加颜色和文本，但我不能在按钮中包含该图标。我与老板分享了这个问题，然后他给了我这个链接https://gourmet.epark.jp/detail/EG00541264并告诉我查看其中的按钮并以相同的方式进行操作。

我尝试检查元素和其他方式，但仍然无法做到这一点。我没有太多使用 CSS 的经验，所以需要帮助。

提前致谢。

编辑 - 我试过了，但无法在按钮文本前面添加那个小图标

<button style="background-color:#e24f01;color:#fff;border-radius:2px;line-height:30px;font-size:14px;font-weight:700;width:150px">WEB予約</button>

标签： css

解决方案

所以基本上你需要做下面的事情（从给定的链接复制）：

.shop-navi-app {
    font-size: 14px;
    font-weight: 700;
    width: 200px;
    text-align: center;
}

.btn {
  background-color: #e24f01;
  color: #fff;
  border-radius: 2px;
  line-height: 30px;
}

.shop-navi-app>a {
    padding: 0;
    line-height: 35px;
}

.btn>a, .main-search-area-body .search-box .btn-search>a {
    color: #fff;
    display: block;
    line-height: 1;
    padding: .3em .8em;
}

a {
    color: #2f0a0a;
    text-decoration: none;
}

.shop-navi-app .icon {
    display: inline-block;
    vertical-align: middle;
    font-size: 15px;
    margin: -1px 10px 0 0;
}

.icon {
    font-family: epg-pc!important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.shop-navi-app .icon-caption {
    display: inline-block;
    vertical-align: middle;
}

.icon-reserve2::after {
    content: url(https://image.ibb.co/esaspT/if_Leaf.png);
}
<div class="shop-navi-app btn">
  <a href="/reserve/EG00541264">
    <i class="icon icon-reserve2"></i>
    <span class="icon-caption">WEB予約</span>
  </a>
</div>

解释：

<div class="shop-navi-app btn">//for button class
  <a href="/reserve/EG00541264">//for link to other page
    <i class="icon icon-reserve2"></i>// for icon
    <span class="icon-caption">WEB予約</span>// for text
  </a>
</div>

在代码中，您拥有div整个按钮。然后你有一个a标签，div其中包含当你点击按钮时重定向的链接。a标签包含标签中的图标i和span文本标签。

推荐阅读