引导按钮圈阴影问题

Question

我创建了bootstrap button circle，但我的按钮不像google gmail app按钮，我想使用我的代码创建这个按钮，看看我的示例图片  

我尝试这样做，但我的按钮不像google gmail app按钮 如何制作这样的按钮，请帮我解决这个问题 感谢

.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px; background-color: #b89981;
  line-height: 1.428571429;
  border-radius: 15px;   border-radius: 35px;


}
.btn-circle.btn-xl {
  width: 54px;
  height: 54px;
  padding: 10px 16px;
  font-size: 24px;
  line-height: 0.33;
  border-radius: 35px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>


<button type="button" class="btn btn-default btn-circle btn-xl">+ </button>

Answer 1

请尝试以下代码

.btn-circle.btn-xl {
  width: 54px;
  height: 54px;
  padding: 10px 16px;
  font-size: 24px;
  line-height: 0.33;
  border-radius: 35px;
  background: #b51313;
  color: #FFF;
  box-shadow: 3px 1px 10px #252020;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
 <button type="button" class="btn btn-default btn-circle btn-xl">x</button>

Answer 2

最后我解决了这个问题

这是我的代码 我用过这个 border-radius: 50%; box-shadow: 0 4px 8px rgba(0,0,0,.25);

＆＃13;

＆＃13;

.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px; background-color: #b89981;
  line-height: 1.428571429;
  border-radius: 15px;   cursor: pointer;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0,0,0,.25);
}
 .btn-circle.btn-xl {
  width: 54px;
  height: 54px;
  padding: 10px 16px;
  font-size: 24px;
  line-height: 0.33; cursor: pointer;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0,0,0,.25);
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
 <button type="button" class="btn btn-default btn-circle btn-xl"><img src="Image/add-btn-icon.png">x </button>

＆＃13;

＆＃13;

＆＃13;