buttons.css (1459B)
1 .button-container { 2 display: table; 3 margin-left: auto; 4 margin-right: auto; 5 } 6 7 button, 8 .button, 9 a.button { 10 position: relative; 11 display: flex; 12 align-items: center; 13 justify-content: center; 14 text-decoration: none; 15 text-align: center; 16 color: var(--weak-accent); 17 font: inherit; 18 appearance: none; 19 cursor: pointer; 20 outline: none; 21 22 & :hover { 23 color: var(--accent); 24 } 25 26 /* variants */ 27 28 &.outline { 29 background: transparent; 30 box-shadow: none; 31 padding: 8px 18px; 32 33 :hover { 34 transform: none; 35 box-shadow: none; 36 } 37 } 38 39 & .link { 40 background: none; 41 } 42 43 /* sizes */ 44 45 & .small { 46 font-size: .8rem; 47 } 48 49 & .wide { 50 min-width: 200px; 51 padding: 14px 24px; 52 } 53 54 & :focus { 55 border-color: var(--color); 56 outline: 2px solid var(--color); 57 } 58 } 59 60 a.read-more, 61 a.read-more:hover, 62 a.read-more:active { 63 display: block; 64 border: none; 65 color: var(--accent); 66 background: none; 67 box-shadow: none; 68 padding: 0; 69 max-width: 100%; 70 text-align: left; 71 } 72 73 .code-toolbar { 74 margin-bottom: 20px; 75 76 & .toolbar-item a { 77 position: relative; 78 display: inline-flex; 79 align-items: center; 80 justify-content: center; 81 padding: 3px 8px; 82 margin-bottom: 5px; 83 text-decoration: none; 84 text-align: center; 85 font-size: 13px; 86 font-weight: 500; 87 border-radius: 8px; 88 border: 1px solid transparent; 89 appearance: none; 90 cursor: pointer; 91 outline: none; 92 } 93 } 94