ps-frame-father/lib/components/Button/index.css

An enterprise-class UI design language and React components implementation

.xButton {
  box-sizing: border-box;
  display: inline-block;
  padding: 6px 1em;
  line-height: 1.4999em;
  border-radius: 4px;
  border: 1px solid transparent;
  color: #fff;
  font-family: inherit;
  background-color: #000;
  user-select: none;
  cursor: pointer;
  text-align: center;
}
.xButton.primary {
  background-color: #09f;
}
.xButton.warning {
  background-color: #F90;
}
.xButton.info {
  background-color: #C03;
}
.xButton.pure {
  border: 1px solid #ccc;
  color: rgba(0, 0, 0, 0.65);
  background-color: #fff;
}
.xButton.pure::after {
  background-image: radial-gradient(circle, #ccc 10%, transparent 11%);
}
.xButton.circle {
  border-radius: 1.5em;
}
.xButton.block {
  display: block;
}
.ripple {
  position: relative;
  overflow: hidden;
}
.ripple::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 11%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(12, 12);
  opacity: 0;
  transition: transform 0.6s, opacity 0.6s;
}
.ripple:active::after {
  transform: scale(0, 0);
  opacity: 0.3;
  transition: 0s;
}