Micro letter applet button to remove the default border

button {
  position:relative;
  display:block;
  margin-left:auto;
  margin-right:auto;
  padding-left:14px;
  padding-right:14px;
  box-sizing:border-box;
  font-size:18px;
  text-align:center;
  text-decoration:none;
  line-height:2.55555556;
  border-radius:5px;
  -webkit-tap-highlight-color:transparent;
  overflow:hidden;
  color:#000000;
  background-color:#F8F8F8;
}

This is the default button comes with css styles

Normally, we use the following code to remove button to

button{
    border:none;
}
或者
button{
    outline: none;
}

But sometimes it does not work, this time we can use the ::after pseudo-class selectors, because border style button is by ::afterway of implementation, if you define a border on the button will appear two border lines, so we can use ::afterthe way to go override the default values.

button::after {
  border: none;
}

This small program can handle the default button style, and style is only the equivalent of a text, there are still many of the default button style is not removed, the need to set according to individual needs, but more description here, and then there are subsequent encounters case adjourned more, if desired be a custom class selector can get on the button.

Guess you like

Origin www.cnblogs.com/Ashley77/p/11281580.html