-11

Anyone can help me with the best solution to make the button in pure css as well as the font and font style?

Button

Mohammad Usman
  • 37,952
  • 20
  • 92
  • 95
Shane Nacpil
  • 11
  • 2
  • well. what have you tried ? share html css code – Mihai T Jan 06 '17 at 08:18
  • 1
    Looks pretty simple to create that one. Have you tried at all? (*Edit:* The guy who upvoted this question, I don't know what you were thinking.) – Harry Jan 06 '17 at 08:18
  • It's not a button. It's a checkbox. I would start by using a checkbox and a label and apply some styling to it. Looks like you might be able to do it with just those elements. – GolezTrol Jan 06 '17 at 08:18
  • Stackoverflow is not a "Get my programming done for free" website. Its a website for programming help. Please share your code and we will try to help. – Nevermore Jan 06 '17 at 08:19
  • Please, share your code. – AmitV Jan 06 '17 at 08:21
  • @Harry I have similar thoughts quite often ... There are lots of amazing upvotes – vals Jan 06 '17 at 08:26
  • True @vals and a very sad state :( – Harry Jan 06 '17 at 08:27
  • @Nevermore requiem. :( – hdotluna Jan 06 '17 at 08:28
  • @LataBelle Requiem happened on OP's question. :D – Nevermore Jan 06 '17 at 08:37
  • Thank you to all who responded. Just new with stack overflow. Below is my code: ` .btn{ top:15px; width:280px; height:74px; margin:0 auto; display:block; position:relative; background-size:280px 74px; background-repeat:no-repeat; background-image:url(../img/btn-purchase.png); } ` Need help on how to make it as pure css instead of making it as an image. Thank you – Shane Nacpil Jan 09 '17 at 06:31

2 Answers2

1

you should share what you have tried when asking a question

this is not a code making site. we help you debug your pre-existing code.

but anyway, here is an example of what you want to achieve ( i guess you are interested in the css-styles of the button eg shadows, borders etc. )

the below example is just one way to do it. it all depends on your html structure

let me know if it works for you

.button { 
text-align:center;
background:yellow;
display:inline-block;
border-radius:15px;
padding:15px 30px;
-moz-box-shadow: 0px 5px 0px 0px #cec202;
-webkit-box-shadow: 0px 5px 0px 0px #cec202;
box-shadow: 0px 5px 0px 0px #cec202;
position:relative;
margin-left:15px;
cursor:pointer;

}

.button h1,.button p { margin:0}
.button:after {
  background:#906200;
  position:absolute;
  width:calc(100% + 10px);
  height:calc(100% + 15px);
  top:0;
  content:"";
  left:-5px;
  z-index:-1;
  border-radius:15px;
  }
<div class="button">
<h1>I am a button</h1>
<p>More text under the button</p>
</div>
Mihai T
  • 17,254
  • 2
  • 23
  • 32
  • Hi @Mihai T Thank you for the help. Very new with coding and not aware of such requirements. Need to practice more. Thanks so much – Shane Nacpil Jan 09 '17 at 06:49
  • @ShaneNickman glad i could help. if this answer was usefull to you...please rate is as accepted – Mihai T Jan 09 '17 at 07:43
-1

you can place images on buttons and many other elements. this checkbox was created like this Adding an image to submit button using CSS

HTML

<input type="submit" id="search" name="submit" alt="search" value="" >

CSS

input#search{
    background:url(../search-icon.png);
    background-repeat: no-repeat;
    width:40px;
    height:40px;
}

See this for example http://codepen.io/jointmedias/pen/HqCJe - CSS 3 checkbox image replacement

Community
  • 1
  • 1
ralf htp
  • 9,149
  • 4
  • 22
  • 34