css - 如何调整按钮的CSS样式

Question

我目前为看起来有点过时的按钮设置了 css 样式。这是我的 CSS:

a.yellow_button {
font-weight: bold;
font-size: 1.2em;
-moz-border-radius: 14px 14px 14px 14px;
-webkit-border-radius: 14px;
border-radius: 14px;

background: #ffce2e;
color: #444;
text-shadow: 1px 1px 1px rgba(256, 256, 256, 0.9);

-moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
-webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
box-shadow: 3px 3px 3px rgba(0,0,0,0.3);

border: 1px solid #444;
cursor: pointer;
text-decoration: none;
padding: 5px 6px;
margin-top: 0;
margin-left:0;
margin-right: 2px;

float:none; 
display: inline-block;

}

a.yellow_button:hover {
background: none repeat scroll 0 0 #ff0;
color: #000;
}

您可以看到这些按钮，因为它们当前出现在 comehike.com 上，使该网站的设计看起来有点旧。

我需要做的是让按钮看起来像这个模型右上角的黄色按钮:

知道我应该更改 CSS 的哪一部分以获得这种效果吗？

Answer 1

没错。这样就可以了。

.whatever-the-class-is {
  /* No border */
  border-style:none;

现在有一些影子

  -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
  box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
  -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);

还有 flex 的边框

  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;

最后，渐变。此代码旨在适用于多种浏览器。

  background: #bfc126; /* Old browsers */
  background: -moz-linear-gradient(top, #bfc126 0%, #ffff00 100%); /* Firefox */
  background: -webkit-linear-gradient(top, #bfc126 0%,#ffff00 100%); /* Chrome, Safari */
 background: -o-linear-gradient(top, #bfc126 0%,#ffff00 100%); /* Opera */
 background: -ms-linear-gradient(top, #bfc126 0%,#ffff00 100%); /* IE */
 background: linear-gradient(top, #bfc126 0%,#ffff00 100%); /* Probably should include this aswell */
}

您可以创建渐变图像，但这需要时间，并且会使页面加载速度变慢。