#212121
1.button { 2 -moz-appearance: none; 3 -webkit-appearance: none; 4 appearance: none; 5 border: none; 6 background: none; 7 color: #0f1923; 8 cursor: pointer; 9 position: relative; 10 padding: 8px; 11 margin-bottom: 20px; 12 text-transform: uppercase; 13 font-weight: bold; 14 font-size: 14px; 15 transition: all .15s ease; 16} 17 18.button::before, 19.button::after { 20 content: ''; 21 display: block; 22 position: absolute; 23 right: 0; 24 left: 0; 25 height: calc(50% - 5px); 26 border: 1px solid #7D8082; 27 transition: all .15s ease; 28} 29 30.button::before { 31 top: 0; 32 border-bottom-width: 0; 33} 34 35.button::after { 36 bottom: 0; 37 border-top-width: 0; 38} 39 40.button:active, 41.button:focus { 42 outline: none; 43} 44 45.button:active::before, 46.button:active::after { 47 right: 3px; 48 left: 3px; 49} 50 51.button:active::before { 52 top: 3px; 53} 54 55.button:active::after { 56 bottom: 3px; 57} 58 59.button_lg { 60 position: relative; 61 display: block; 62 padding: 10px 20px; 63 color: #fff; 64 background-color: #0f1923; 65 overflow: hidden; 66 box-shadow: inset 0px 0px 0px 1px transparent; 67} 68 69.button_lg::before { 70 content: ''; 71 display: block; 72 position: absolute; 73 top: 0; 74 left: 0; 75 width: 2px; 76 height: 2px; 77 background-color: #0f1923; 78} 79 80.button_lg::after { 81 content: ''; 82 display: block; 83 position: absolute; 84 right: 0; 85 bottom: 0; 86 width: 4px; 87 height: 4px; 88 background-color: #0f1923; 89 transition: all .2s ease; 90} 91 92.button_sl { 93 display: block; 94 position: absolute; 95 top: 0; 96 bottom: -1px; 97 left: -8px; 98 width: 0; 99 background-color: #ff4655; 100 transform: skew(-15deg); 101 transition: all .2s ease; 102} 103 104.button_text { 105 position: relative; 106} 107 108.button:hover { 109 color: #0f1923; 110} 111 112.button:hover .button_sl { 113 width: calc(100% + 15px); 114} 115 116.button:hover .button_lg::after { 117 background-color: #fff; 118} 119
11K views
11K views
Comments
1oriolmontcreus 20. November at 16:19
20. November at 16:19
Valorant website button
Variations
1 MIT License