1 reply [Last post]
Try this
Try this's picture
Offline
newbie
Last seen: 6 years 29 weeks ago
Timezone: GMT-6
Joined: 2014-11-26
Posts: 2
Points: 3

Hello,

This is my first post on this website. I'm trying to create what is called the "Belcher Button" in css. I tried to upload an image of it to this forum. Could not figure out how to do that.

The first problem I had was horizontal lists.

The code I posted below does not create a horizontal list. So far, the only way I've been able to create a horizontal list is by using the <li> element.

I'm using an iPad with safari. I know it would help a lot to see the image I'm trying to recreate with css, if I
am allowed to upload an image. Any help is appreciated.

<span style="font-family: Tahoma; color: rgb(204, 0, 0); font-size: xx-large;">“The Belcher  Button”</span>
 
<style type = "text/css">
#div1 {
     background-color: none;
     width: 300px; 
     height: 150px;
     border-color: red;
     border-style: dashed;
     border-width: 4px;
}
#addtocart
{
                        width: 220px;
                        background-color: gold; 
                        height: 40px; 
                        margin-left: auto; 
                        margin-right: auto; 
                        border: solid; 
                        border-color: red; 
                        text-align: center; 
                        color: black; 
                        font-size: 2em; 
                        margin: auto;
                        display: inline;
}
 
 
 
</style>
 
<div id= "div1">
 
      <div>
            <ul id="addtocart">
                 <li><h2><span style="list-style-type: none;">Regular Price&nbsp;</span><span style="list-style-type: none; text-decoration: line-through;">$60</span>&nbsp;&nbsp;&nbsp;<span>Today&nbsp;$19.95</span></h2></li>
 
                 <li>
                         Test
                 </li>
            </ul>
      </div>
            <div id="addtocart">
                            Add To Cart
            </div>
 
 
</div>

AttachmentSize
belcher-button.png22.46 KB
Try this
Try this's picture
Offline
newbie
Last seen: 6 years 29 weeks ago
Timezone: GMT-6
Joined: 2014-11-26
Posts: 2
Points: 3

I figured it out.

I figured out the horizontal list problem. Thank you to the person who attached the image. If anyone has any suggestions of how to draw that button in css, I certainly will appreciate your help.