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

Question

我的老板要求我在我们的网页上创建这个按钮

我可以创建按钮并为其添加颜色和文本，但我不能在按钮中包含该图标。我和老板分享了这个问题，然后他给了我这个链接 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>

Answer 1

所以基本上你需要做如下的事情(从给定的链接复制):

.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。然后你在 div 中有一个 a 标签，它包含当你点击按钮时重定向的链接。 a 标签包含 i 标签中的图标和用于文本的 span 标签。