如何在纯 css 中制作按钮？

Question

任何人都可以帮助我提供制作纯 css 按钮以及字体和字体样式的最佳解决方案？

Answer 1

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

Answer 2

你应该在提问时分享你尝试过的东西

这不是代码制作网站。我们帮助您调试现有代码。

但无论如何，这是您想要实现的示例（我猜您对按钮的 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>

如何在纯 css 中制作按钮？

How can I make the button in pure css?

css

css-shapes