如何消除“按下按钮”效果并使按钮在点击时变平

Posted 2023-03-06

【中文标题】如何消除“按下按钮”效果并使按钮在点击时变平

【英文标题】：How to remove 'press button' effect and make button flat even on click

【发布时间】：2015-10-06 23:00:39

【问题描述】：

我有以下样式的按钮

button 
  background: none;
  border-color: #87db41;
  color: #87db41;
  padding: 5px 5px;
  width: 30%;
  text-align: center;
  &: active 
    border-color: @aviata-color;

  

<button>Subscribe</button>

我想移除“按下按钮”的 3D 效果。我怎样才能做到这一点？ 如果有帮助，我也在我的网站上使用引导程序

【问题讨论】：

border-style: outset;

Remove the complete styling of an html button/submit的可能重复

您标记引导程序...为什么不使用引导程序中的“btn”类...它更有效且可自定义...

【参考方案1】：

你可以添加这个 CSS 属性：

button outline: none !important;

【参考方案2】：

使用以下 CSS 规则：

:active  border-style: outset;

button 
  background: none;
  border-color: #87db41;
  color: #87db41;
  padding: 5px 5px;
  width: 30%;
  text-align: center;
  outline: none;

button:active 
  border-style: outset;

<button>Subscribe</button>

我还从激活的按钮中删除了轮廓。

【参考方案3】：

只需将border-style 设置为solid 并包含一些active/focus 状态

button 
  background: none;
  border-style: solid;
  border-color: #87db41;
  color: #87db41;
  padding: 5px 5px;
  width: 30%;
  text-align: center;
  &: active 
    border-color: @aviata-color;

  


button.active.focus, button.active:focus,
button.focus, button:active.focus, 
button:active:focus, button:focus 
  outline: none;
  box-shadow: none;
  background-color: white;

<button>Subscribe</button>

【讨论】：

box-shadow:none 为我解决了问题（一些应用 box-shadow:inset 的样式表导致了我无法摆脱的按钮效果）。谢谢。

【参考方案4】：

只是一个建议。

当你使用 bootstrap 时，你可以在 bootstrap.css 代码中看到：

.btn 
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;

.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus 
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;

.btn:hover,
.btn:focus,
.btn.focus 
  color: #333;
  text-decoration: none;

.btn:active,
.btn.active 
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
          box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);

.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn 
  cursor: not-allowed;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
          box-shadow: none;
  opacity: .65;

a.btn.disabled,
fieldset[disabled] a.btn 
  pointer-events: none;

.btn-default 
  color: #333;
  background-color: #fff;
  border-color: #ccc;

.btn-default:focus,
.btn-default.focus 
  color: #333;
  background-color: #e6e6e6;
  border-color: #8c8c8c;

.btn-default:hover 
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;

.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default 
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;

.btn-default:active:hover,
.btn-default.active:hover,
.open > .dropdown-toggle.btn-default:hover,
.btn-default:active:focus,
.btn-default.active:focus,
.open > .dropdown-toggle.btn-default:focus,
.btn-default:active.focus,
.btn-default.active.focus,
.open > .dropdown-toggle.btn-default.focus 
  color: #333;
  background-color: #d4d4d4;
  border-color: #8c8c8c;

.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default 
  background-image: none;

.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus,
.btn-default.disabled:active,
.btn-default[disabled]:active,
fieldset[disabled] .btn-default:active,
.btn-default.disabled.active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default.active 
  background-color: #fff;
  border-color: #ccc;

.btn-default .badge 
  color: #fff;
  background-color: #333;

<button class="btn btn-default">BTN DEFAULT</button>

第一部分只是定义了所有“btn”类项目的显示属性。 第二部分为“btn-default”项目定义了更具体的显示设置（还有btn-success btn-warning等等……）。

如果您想自定义它，只需复制代码并将名称更改为“btnCustom”并编辑设置。或者只是添加一些自定义的特定 btn-* 显示，如 btn-pink 或任何东西。我经常用它来制作几个按钮颜色主题，在我的项目中有时我有 btn-black、btn-purple 之类的东西......

下面的代码作为“btnCustom btnCustom-default”的示例，一个不会移动的按钮，只是用引导程序“默认”颜色主题保持静态：

.btnCustom 
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;

.btnCustom:hover,
.btnCustom:focus,
.btnCustom.focus 
  text-decoration: none;

.btnCustom:active,
.btnCustom.active 
  background-image: none;

.btnCustom.disabled,
.btnCustom[disabled],
fieldset[disabled] .btnCustom
  cursor: not-allowed;
  filter: alpha(opacity=65);
  opacity: .65;

a.btnCustom.disabled,
fieldset[disabled] a.btnCustom
  pointer-events: none;

.btnCustom-default 
  color: #333;
  background-color: #fff;
  border-color: #ccc;

.btnCustom-default:focus,
.btnCustom-default.focus 
  color: #333;

.btnCustom-default:hover 
  color: #333;

.btnCustom-default:active,
.btnCustom-default.active,
.open > .dropdown-toggle.btnCustom-default 
  color: #333;

.btnCustom-default:active:hover,
.btnCustom-default.active:hover,
.open > .dropdown-toggle.btnCustom-default:hover,
.btnCustom-default:active:focus,
.btnCustom-default.active:focus,
.open > .dropdown-toggle.btnCustom-default:focus,
.btnCustom-default:active.focus,
.btnCustom-default.active.focus,
.open > .dropdown-toggle.btnCustom-default.focus 
  color: #333;

.btnCustom-default:active,
.btnCustom-default.active,
.open > .dropdown-toggle.btnCustom-default 
  background-image: none;

.btnCustom-default.disabled,
.btnCustom-default[disabled],
fieldset[disabled] .btnCustom-default,
.btnCustom-default.disabled:hover,
.btnCustom-default[disabled]:hover,
fieldset[disabled] .btnCustom-default:hover,
.btnCustom-default.disabled:focus,
.btnCustom-default[disabled]:focus,
fieldset[disabled] .btnCustom-default:focus,
.btnCustom-default.disabled.focus,
.btnCustom-default[disabled].focus,
fieldset[disabled] .btnCustom-default.focus,
.btnCustom-default.disabled:active,
.btnCustom-default[disabled]:active,
fieldset[disabled] .btnCustom-default:active,
.btnCustom-default.disabled.active,
.btnCustom-default[disabled].active,
fieldset[disabled] .btnCustom-default.active 

.btnCustom-default .badge 
  color: #fff;
  background-color: #333;

<button class="btnCustom btnCustom-default">BTNCUSTOM DEFAULT</button>

这看起来有点复杂，或者很长。 但这允许您构建自己的 css“类引导”类样式，然后可以轻松重复使用，将您的编辑保存在“customBootstrap.css”文件中并将其添加到您的项目中。

希望这会有所帮助；）

【参考方案5】：

如果您正在使用引导程序，请使用引导程序类 btn、btn-primary，然后在您的 css 中输入此代码。希望对你有帮助。

.btn 
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
    border-radius: 0px;
    outline: none;
    border: none;


.btn:active 
  border-style: outset;
  border: none;



<button class="btn btn-primary">Subscribe</button>

【参考方案6】：

默认情况下button 获取属性-webkit-appearance: button 或其他任何取决于浏览器的属性。

您可以通过不同方式重置该样式。

使用border: none; 甚至border-style: outset;，因为它会将appearance 变成none。