时间戳

首页 > 解决方案 > 移除 button[type="submit"] 的嵌入阴影

html - 移除 button[type="submit"] 的嵌入阴影

问题描述

我希望按钮标签与链接相同

.btn {
    border-radius: 2px;
    padding: 18px 30px;
    color: #fff;
    /* ! */
    max-height: 50px;
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    box-shadow: none;
    /* identical to box height, or 30px */
    color: #fff;
    transition: .05s;
    text-transform: capitalize;
    /*  */
    white-space: nowrap;
    text-align: center;
    webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.btn i,
.btn svg,
.btn span {
    width: 24px;
    font-size: 1.5em;
}
.btn-dark {
    background: #3a3e46;
}
.btn-dark:hover {
    background: #292c31;
}
<button class="btn btn-dark"> I'm a button </button>
<br><br><br><br><br>
<a class="btn btn-dark"> I'm a link </a>

不是字体，只有嵌入的阴影。

标签： htmlcss

解决方案

您可以使用以下方法删除边框：

border: none;


.btn {
    border-radius: 2px;
    padding: 18px 30px;
    color: #fff;
    /* ! */
    max-height: 50px;
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    box-shadow: none;
    /* identical to box height, or 30px */
    color: #fff;
    transition: .05s;
    text-transform: capitalize;
    /*  */
    white-space: nowrap;
    text-align: center;
    webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  
  border: none;
}
.btn i,
.btn svg,
.btn span {
    width: 24px;
    font-size: 1.5em;
}
.btn-dark {
    background: #3a3e46;
}
.btn-dark:hover {
    background: #292c31;
}
<button class="btn btn-dark"> I'm a button </button>
<br><br><br><br><br>
<a class="btn btn-dark"> I'm a link </a>

推荐阅读