如何在纯CSS中制作按钮？

Question

任何人都可以帮我提供最好的解决方案，使纯css按钮以及字体和字体样式？

Answer 1

你应该在提问时分享你所尝试的内容

这不是代码制作网站。我们帮助您调试预先存在的代码。

但无论如何，这里有一个你想要实现的例子（我想你对按钮的css风格感兴趣，例如阴影，边框等）。

以下示例只是一种方法。这一切都取决于你的HTML结构

让我知道它是否适合你

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

Answer 2

您可以将图像放在按钮和许多其他元素上。这个复选框是这样创建的  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;
}

请参阅此示例http://codepen.io/jointmedias/pen/HqCJe - CSS 3复选框图像替换