带圆角底边的按钮

Question

我想知道是否可以创建如下按钮：

仅使用 CSS （无其他图片）。

您怎么看？

Answer 1

是的，可以使用box-shadow。该示例使用锚点（a）标记，但也很容易适应button。

＆＃13;

＆＃13;

a {
  background: beige;
  border-radius: 4px;
  text-decoration: none;
  display: block;
  padding: 4px;
  width: 100px;
  text-align: center;
  color: black;
  -webkit-box-shadow: 0px 3px 1px maroon;
  -moz-box-shadow: 0px 3px 1px maroon;
  box-shadow: 0px 3px 1px maroon;
}

＆＃13;

<a href='#'>Text hover</a>

＆＃13;

＆＃13;

＆＃13;

---

在button元素上应用（注意使用border: 0px按钮具有默认边框）。

＆＃13;

＆＃13;

.shape {
  background: beige;
  border-radius: 4px;
  padding: 4px;
  width: 100px;
  text-align: center;
  -webkit-box-shadow: 0px 3px 1px maroon;
  -moz-box-shadow: 0px 3px 1px maroon;
  box-shadow: 0px 3px 1px maroon;
  border: 0px;
}

＆＃13;

<button class='shape'>Text hover</button>

＆＃13;

＆＃13;

＆＃13;

Answer 2

不确定为什么每个人都建议使用box-shadow，您可以仅使用border-radius和底部边框执行此操作：

＆＃13;

＆＃13;

body {
  background: #000;
}

button {
  background: #B6B694; /* Guesswork, you can find the actual colour yourself. */
  border: none;
  border-bottom: 2px solid #f00;
  border-radius: 5px;
  display: inline-block;
  font-size: 14px;
  padding: 10px 14px;
  text-align: left;
  width: 150px;
}

＆＃13;

<button>Text hover</button>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您应该发布到目前为止尝试过的代码。任何方式尝试这一个。

body {
  background-color: #333;
  text-align: center;
  padding-top: 20px;
}
button {
  background: beige;
  border-radius: 3px;
  box-shadow: 0px 5px 0px maroon;
  border: 0;
  color: #333;
  font-size: 17px;
  padding: 10px 30px;
  display: inline-block;
  outline: 0;
}
button:hover {
  background: #eaeab4;
  box-shadow: 0px 5px 0px #4d0000;
}
button:active {
  box-shadow: none;
  margin-top: 5px;
}

<button type="button">Text hover</button>

Answer 4

来自http://www.css3.info/preview/box-shadow/：

Example Q shows a shadow offset to the bottom and right by 5px, with a border-radius of 5px applied to each corner:
#Example_Q {
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 5px 5px black;
-webkit-box-shadow: 5px 5px black;
box-shadow: 5px 5px black;
}

Example R shows the same shadow with a blur distance of 5px:
#Example_R {
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 5px 5px 5px black;
-webkit-box-shadow: 5px 5px 5px black;
box-shadow: 5px 5px 5px black;
}

Answer 5

.example    {
    moz-border-radius:20px; 
    webkit-border-radius:20px;
    border-radius:20px;
}

您希望确保半径适用于每个浏览器，因此请使用此代码使半径适用于所有浏览器。

Answer 6

尝试自己的

border-radius:20px;

-moz-box-shadow:    3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
 box-shadow:         3px 3px 5px 6px #ccc;