Search code examples
csscss-shapes

How can I make the button in pure css?

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

Button

Solution

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