button { font-family: arial text-transform: uppercase font-weight: bold font-size: .7rem letter-spacing: 1.4px color: #666 background-color: #fff min-width: 6rem min-height: 1.8rem padding: .2rem 1rem cursor: pointer border: 1px #b9b9b9 solid outline: none display: flex justify-content: center align-items: center transition: border, color, background .1s ease-in word-break: initial :focus { outline: none /* border-color: #0088cc */ /* box-shadow: 0 0 4px #0088cc */ } :hover { color: #fff background-color: #15d6b4 border: 1px solid #15d6b4 outline: none } -subtle { color: #b9b9b9 border: 1px solid rgba(0,0,0,0) background: none :hover { color: #fff background-color: rgba(200,0,0,.5) border: 1px solid rgba(200,0,0,.5) } } -primary { color: #fff background-color: #9754de border: 1px solid #9754de :hover { background-color: #de54cc border: 1px solid #de54cc } } -active { color: #aa2cda border: 1px solid #aa2cda } -showMore { width: 100% padding: .2rem 0 border-left: none border-right: none border-bottom: none } }