buttron/__tests__/cases/basic/lineHeightBorder.css

A whole new way to button

.lineHeight {
  position: relative;
  width: 200px;
  height: 60px;
  margin: 0rem;
  padding: 0rem;
  background: #2196f3;
  color: #fff;
  border: 5px solid #008000;
  border-radius: 4px;
  box-shadow: initial;
  font-size: 1rem;
  font-weight: initial;
  font-family: initial;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  line-height: calc(60px - 10px);
  cursor: pointer;
  overflow: hidden;
  z-index: 0;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}
.lineHeight {
  position: relative;
  width: 200px;
  height: 60px;
  margin: 0rem;
  padding: 0rem;
  background: #2196f3;
  color: #fff;
  border: 5px solid #008000;
  border-radius: 4px;
  box-shadow: initial;
  font-size: 1rem;
  font-weight: initial;
  font-family: initial;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  line-height: calc(60px - 10px);
  cursor: pointer;
  overflow: hidden;
  z-index: 0;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}
.lineHeight2 {
  position: relative;
  width: 200px;
  height: 60px;
  margin: 0rem;
  padding: 0rem;
  background: #2196f3;
  color: #fff;
  border: initial;
  border-radius: 4px;
  box-shadow: initial;
  font-size: 1rem;
  font-weight: initial;
  font-family: initial;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  line-height: calc(60px - 10px);
  cursor: pointer;
  overflow: hidden;
  z-index: 0;
  transform: translateZ(0);
  border-style: solid;
  border-color: #008000;
  border-width: 5px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}
.lineHeight2 {
  position: relative;
  width: 200px;
  height: 60px;
  margin: 0rem;
  padding: 0rem;
  background: #2196f3;
  color: #fff;
  border: initial;
  border-radius: 4px;
  box-shadow: initial;
  font-size: 1rem;
  font-weight: initial;
  font-family: initial;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  line-height: calc(60px - 10px);
  cursor: pointer;
  overflow: hidden;
  z-index: 0;
  transform: translateZ(0);
  border-style: solid;
  border-color: #008000;
  border-width: 5px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}
.lineHeight3 {
  position: relative;
  width: 200px;
  height: 60px;
  margin: 0rem;
  padding: 0rem;
  background: #2196f3;
  color: #fff;
  border: initial;
  border-radius: 4px;
  box-shadow: initial;
  font-size: 1rem;
  font-weight: initial;
  font-family: initial;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  line-height: calc(60px - 15px);
  cursor: pointer;
  overflow: hidden;
  z-index: 0;
  transform: translateZ(0);
  border-top: 10px solid #008000;
  border-bottom: 5px solid #ff0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}
.lineHeight3 {
  position: relative;
  width: 200px;
  height: 60px;
  margin: 0rem;
  padding: 0rem;
  background: #2196f3;
  color: #fff;
  border: initial;
  border-radius: 4px;
  box-shadow: initial;
  font-size: 1rem;
  font-weight: initial;
  font-family: initial;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  line-height: calc(60px - 15px);
  cursor: pointer;
  overflow: hidden;
  z-index: 0;
  transform: translateZ(0);
  border-top: 10px solid #008000;
  border-bottom: 5px solid #ff0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}
.lineHeight4 {
  position: relative;
  width: 200px;
  height: 60px;
  margin: 0rem;
  padding: 0rem;
  background: #2196f3;
  color: #fff;
  border: 10px solid #008000;
  border-radius: 4px;
  box-shadow: initial;
  font-size: 1rem;
  font-weight: initial;
  font-family: initial;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  z-index: 0;
  transform: translateZ(0);
  line-height: 20px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}
.lineHeight4 {
  position: relative;
  width: 200px;
  height: 60px;
  margin: 0rem;
  padding: 0rem;
  background: #2196f3;
  color: #fff;
  border: 10px solid #008000;
  border-radius: 4px;
  box-shadow: initial;
  font-size: 1rem;
  font-weight: initial;
  font-family: initial;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  z-index: 0;
  transform: translateZ(0);
  line-height: 20px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}