[class*="ct-button"] { display: inline-flex; align-items: center; justify-content: center; height: var(--buttonHeight, 35px); padding: 0 var(--buttonPadding, 15px); font-size: var(--buttonFontSize, 13px); font-weight: 500; outline: none; cursor: pointer; text-decoration: none; letter-spacing: 0.01em; border-radius: 4px; border-width: 1px; border-style: solid; box-sizing: border-box; transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .ct-button { color: rgba(46, 68, 83, 0.8); background: #fff; border-color: #e2e6eb; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07); &:not([data-hover="blue"]) { &:hover, &:focus { color: #2e4453; border-color: rgba(190, 196, 203, 0.8); } } } .ct-button-primary { color: #fff; background: #0085ba; border-color: rgba(1, 118, 165, 0.6); box-shadow: 0 1px 4px rgba(1, 96, 134, 0.4); } .ct-button-primary, .ct-button[data-hover="blue"] { &:hover, &:focus { color: #fff; background: #0591c9; border-color: rgba(1, 118, 165, 0.85); box-shadow: 0 1px 4px rgba(1, 96, 134, 0.4); } }