CODEWITHSUNDEEP
css
sanjeev51
sanjeev51

Reputation: 1730

How to copy a CSS content from a webpage?

I was asked my Boss to create this button on our web page This is the button which i need to copy in my web page

I can create the button add color and text to it but i cannot include that icon present in the button. I shared the problem with my boss then he gave me this link https://gourmet.epark.jp/detail/EG00541264 and told me to look the button in it and do in the same way.

I tried inspecting elements and other ways but still cannot make this. I don't have much experience of working with CSS so need help.

Thanks in advance.

Edit - I tried this but cannot add that small icon in front of button text

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

Upvotes: 0

Views: 362

Answers (1)

Vikasdeep Singh
Vikasdeep Singh

Reputation: 21756

So basically you need to do something like below (copied from the given link):

.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>

Explnation:

<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>

In the code, you have div for whole button. Then you have a tag inside div which contains link to redirect when you click on button. a tag contains icon in i tag and span tag for text.

Upvotes: 1

Related Questions