css - 不使用开发人员工具从按钮克隆 CSS 设计

Question

我有一张漂亮按钮的图片，我想获取它的 CSS。遗憾的是，我刚拿到按钮的图片。

因此，在尝试重建它时，我在盒子阴影中挣扎。我需要一个内阴影和一个外阴影，不是吗？

这是我目前的情况

body {
  font-family: "Arial";
  background-color: gray;
}

#box{
  width: 200px;
  height: 40px;
  text-align: center;
  color: #ffffff;
  text-shadow: 1px 1px 1px #000000;
  border-style: solid;
  border-width: 1px;
  border-radius: 8px;
  border-color: #99ff99;
  background: linear-gradient(#262626, #00b33c);
  box-shadow: inset 0px -7px 7px #99ff99;
}

<div id="box">
  TEST AGAIN
</div>

我现在的按钮看起来真的很丑，我希望你们中的一些人能帮助我。也许我只需要外部阴影和一些颜色变化..

Answer 1

我认为您正在寻找的是 dropshadow。我试着重新创建了一点按钮，但您可能也想自己调整一下。

Here is the link .

CSS:

#box{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 25px;
  text-align: center;
  color: #ffffff;
  text-shadow: 1px 1px 1px #000000;
  border-style: solid;
  border-width: 1px;
  border-radius: 8px;
  border-color: #99ff99;
  background: linear-gradient(#262626, #00b33c);
  box-shadow: inset 0px -3px 7px #99ff99;
  -webkit-filter: drop-shadow(0px 0px 0px rgba(255,255,255,0.80));
  -webkit-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  transition: all 0.5s linear;
  -webkit-filter: drop-shadow(0px 0px 8px rgba(0, 231, 255, 0.8))
}