如何在纯 CSS 中制作按钮？ [关闭]答案

【问题标题】：How can I make the button in pure css? [closed]如何在纯 CSS 中制作按钮？ [关闭]
【发布时间】：2017-05-20 23:22:33
【问题描述】：

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

【问题讨论】：

好吧。你试过什么？分享html css代码
创建那个看起来很简单。你有没有试过？（编辑：支持这个问题的人，我不知道你在想什么。）
这不是一个按钮。这是一个复选框。我会先使用一个复选框和一个标签，然后对其应用一些样式。看起来你可以只用这些元素来做到这一点。
Stackoverflow 不是“免费完成我的编程”网站。它是一个提供编程帮助的网站。请分享您的代码，我们会尽力提供帮助。
请分享您的代码。

标签： css css-shapes

【解决方案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>

【讨论】：

嗨@Mihai T 谢谢你的帮助。非常新的编码，不知道这样的要求。需要多练习。非常感谢
@ShaneNickman 很高兴我能帮上忙。如果这个答案对你有用...请接受率

【解决方案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 复选框图像替换

【讨论】：

问题还可能是如何创建圆形边框，如何创建外部阴影，如何创建内部阴影，如何...
同意@vals先生
感谢所有回复的人。新的堆栈溢出。