├── main.css ├── button.css ├── index.html └── csscomb.json /main.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'DIN Next LT Pro Bold'; 3 | src: url('//db.onlinewebfonts.com/t/3a88649e176a40a6d80b395ca0ae430d.eot'); 4 | src: url('//db.onlinewebfonts.com/t/3a88649e176a40a6d80b395ca0ae430d.eot?#iefix') format('embedded-opentype'), url('//db.onlinewebfonts.com/t/3a88649e176a40a6d80b395ca0ae430d.woff2') format('woff2'), url('//db.onlinewebfonts.com/t/3a88649e176a40a6d80b395ca0ae430d.woff') format('woff'), url('//db.onlinewebfonts.com/t/3a88649e176a40a6d80b395ca0ae430d.ttf') format('truetype'), url('//db.onlinewebfonts.com/t/3a88649e176a40a6d80b395ca0ae430d.svg#DIN Next LT Pro Bold') format('svg'); 5 | } 6 | 7 | :root { 8 | --v-red: #ff4655; 9 | --v-white: #ece8e1; 10 | --v-black: #0f1923; 11 | --v-outline: rgba(236, 232, 225, .5); 12 | } 13 | 14 | *, ::after, ::before { 15 | box-sizing: border-box; 16 | } 17 | 18 | html, body { 19 | font-size: 10px; 20 | margin: 0; 21 | color: var(--v-white); 22 | background-color: var(--v-black); 23 | text-rendering: optimizeLegibility; 24 | } 25 | 26 | #container { 27 | display: flex; 28 | align-items: center; 29 | flex-direction: column; 30 | justify-content: center; 31 | min-height: 100vh; 32 | } 33 | 34 | .box { 35 | width: 70%; 36 | } 37 | 38 | .logo { 39 | margin-bottom: 40px; 40 | fill: var(--v-white); 41 | } -------------------------------------------------------------------------------- /button.css: -------------------------------------------------------------------------------- 1 | button { 2 | font-family: 'DIN Next LT Pro Bold'; 3 | font-size: 1.9rem; 4 | font-weight: 400; 5 | position: relative; 6 | display: block; 7 | width: 100%; 8 | margin-bottom: 3rem; 9 | padding: .7rem; 10 | cursor: pointer; 11 | text-transform: uppercase; 12 | color: var(--v-white); 13 | border: 0; 14 | background-color: transparent; 15 | } 16 | 17 | button:hover { 18 | color: var(--v-white); 19 | } 20 | 21 | button::before, button::after { 22 | position: absolute; 23 | left: 0; 24 | width: 100%; 25 | height: calc(50% - .4rem); 26 | content: ''; 27 | border: 1px solid var(--v-outline); 28 | background-color: transparent; 29 | } 30 | 31 | button::before { 32 | top: 0; 33 | border-bottom: 0; 34 | } 35 | 36 | button::after { 37 | bottom: 0; 38 | border-top: 0; 39 | } 40 | 41 | /* Hover Effect */ 42 | 43 | .hover-effect { 44 | position: absolute; 45 | z-index: 1; 46 | top: 0; 47 | left: -5%; 48 | width: 110%; 49 | height: 100%; 50 | content: ''; 51 | transition: -webkit-transform .3s ease-out; 52 | transition: transform .3s ease-out; 53 | transform: translateX(-100%) skew(-10deg); 54 | background-color: var(--v-red); 55 | } 56 | 57 | button:hover .hover-effect { 58 | transform: translateX(0) skew(-10deg); 59 | } 60 | 61 | /* LABEL */ 62 | 63 | .label { 64 | position: relative; 65 | overflow: hidden; 66 | margin: 0; 67 | } 68 | 69 | .label:before { 70 | position: absolute; 71 | bottom: 0; 72 | left: 0; 73 | display: block; 74 | width: 100%; 75 | height: 100%; 76 | content: ''; 77 | } 78 | 79 | /* Label Text */ 80 | 81 | .label-text { 82 | position: relative; 83 | z-index: 1; 84 | display: block; 85 | padding: 1.9rem 3rem; 86 | } 87 | 88 | /* Right Bottom Corner dot */ 89 | 90 | .label-text:after { 91 | position: absolute; 92 | right: 0; 93 | bottom: 0; 94 | display: block; 95 | width: .6rem; 96 | height: .6rem; 97 | content: ''; 98 | transition: background-color .2s ease-in; 99 | background-color: var(--v-black); 100 | } 101 | 102 | button:hover .label-text:after { 103 | background-color: var(--v-white); 104 | } 105 | 106 | /* PRIMARY BUTTON */ 107 | 108 | .primary { 109 | color: var(--v-black); 110 | } 111 | 112 | .primary .label::before { 113 | background-color: var(--v-white); 114 | } 115 | 116 | /* OUTLINE BUTTON */ 117 | 118 | .outline { 119 | color: var(--v-white); 120 | } 121 | 122 | .outline .label::before, .outline .label::after { 123 | border: 1px solid var(--v-outline); 124 | } 125 | 126 | /* OUTLINE RED BUTTON */ 127 | 128 | .outline+.red { 129 | color: var(--v-red); 130 | } 131 | 132 | .outline+.red:hover { 133 | color: var(--v-white); 134 | } 135 | 136 | .outline+.red .label::before, .outline+.red .label::after { 137 | border-color: var(--v-red); 138 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Valorant Buttons | CSS 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | 20 | 21 | 27 | 28 | 34 | 35 | 41 |
42 |
43 | 44 | 45 | -------------------------------------------------------------------------------- /csscomb.json: -------------------------------------------------------------------------------- 1 | { 2 | "exclude": [ 3 | ".git/**", 4 | "node_modules/**", 5 | "bower_components/**" 6 | ], 7 | "always-semicolon": true, 8 | "block-indent": " ", 9 | "color-case": "lower", 10 | "color-shorthand": true, 11 | "element-case": "lower", 12 | "eof-newline": true, 13 | "leading-zero": false, 14 | "quotes": "single", 15 | "remove-empty-rulesets": true, 16 | "space-after-colon": " ", 17 | "space-after-combinator": " ", 18 | "space-after-opening-brace": "\n", 19 | "space-after-selector-delimiter": "\n", 20 | "space-before-closing-brace": "\n", 21 | "space-before-colon": "", 22 | "space-before-combinator": " ", 23 | "space-before-opening-brace": "\n", 24 | "space-before-selector-delimiter": "", 25 | "strip-spaces": true, 26 | "unitless-zero": true, 27 | "vendor-prefix-align": true, 28 | "sort-order": [ 29 | [ 30 | "font", 31 | "font-family", 32 | "font-size", 33 | "font-weight", 34 | "font-style", 35 | "font-variant", 36 | "font-size-adjust", 37 | "font-stretch", 38 | "font-effect", 39 | "font-emphasize", 40 | "font-emphasize-position", 41 | "font-emphasize-style", 42 | "font-smooth", 43 | "line-height" 44 | ], 45 | [ 46 | "position", 47 | "z-index", 48 | "top", 49 | "right", 50 | "bottom", 51 | "left" 52 | ], 53 | [ 54 | "display", 55 | "visibility", 56 | "float", 57 | "clear", 58 | "overflow", 59 | "overflow-x", 60 | "overflow-y", 61 | "-ms-overflow-x", 62 | "-ms-overflow-y", 63 | "clip", 64 | "zoom", 65 | "-webkit-align-content", 66 | "-ms-flex-line-pack", 67 | "align-content", 68 | "-webkit-box-align", 69 | "-moz-box-align", 70 | "-webkit-align-items", 71 | "align-items", 72 | "-ms-flex-align", 73 | "-webkit-align-self", 74 | "-ms-flex-item-align", 75 | "-ms-grid-row-align", 76 | "align-self", 77 | "-webkit-box-flex", 78 | "-webkit-flex", 79 | "-moz-box-flex", 80 | "-ms-flex", 81 | "flex", 82 | "-webkit-flex-flow", 83 | "-ms-flex-flow", 84 | "flex-flow", 85 | "-webkit-flex-basis", 86 | "-ms-flex-preferred-size", 87 | "flex-basis", 88 | "-webkit-box-orient", 89 | "-webkit-box-direction", 90 | "-webkit-flex-direction", 91 | "-moz-box-orient", 92 | "-moz-box-direction", 93 | "-ms-flex-direction", 94 | "flex-direction", 95 | "-webkit-flex-grow", 96 | "-ms-flex-positive", 97 | "flex-grow", 98 | "-webkit-flex-shrink", 99 | "-ms-flex-negative", 100 | "flex-shrink", 101 | "-webkit-flex-wrap", 102 | "-ms-flex-wrap", 103 | "flex-wrap", 104 | "-webkit-box-pack", 105 | "-moz-box-pack", 106 | "-ms-flex-pack", 107 | "-webkit-justify-content", 108 | "justify-content", 109 | "-webkit-box-ordinal-group", 110 | "-webkit-order", 111 | "-moz-box-ordinal-group", 112 | "-ms-flex-order", 113 | "order" 114 | ], 115 | [ 116 | "-webkit-box-sizing", 117 | "-moz-box-sizing", 118 | "box-sizing", 119 | "width", 120 | "min-width", 121 | "max-width", 122 | "height", 123 | "min-height", 124 | "max-height", 125 | "margin", 126 | "margin-top", 127 | "margin-right", 128 | "margin-bottom", 129 | "margin-left", 130 | "padding", 131 | "padding-top", 132 | "padding-right", 133 | "padding-bottom", 134 | "padding-left" 135 | ], 136 | [ 137 | "table-layout", 138 | "empty-cells", 139 | "caption-side", 140 | "border-spacing", 141 | "border-collapse", 142 | "list-style", 143 | "list-style-position", 144 | "list-style-type", 145 | "list-style-image" 146 | ], 147 | [ 148 | "content", 149 | "quotes", 150 | "counter-reset", 151 | "counter-increment", 152 | "resize", 153 | "cursor", 154 | "-webkit-user-select", 155 | "-moz-user-select", 156 | "-ms-user-select", 157 | "user-select", 158 | "nav-index", 159 | "nav-up", 160 | "nav-right", 161 | "nav-down", 162 | "nav-left", 163 | "-webkit-transition", 164 | "-moz-transition", 165 | "-ms-transition", 166 | "-o-transition", 167 | "transition", 168 | "-webkit-transition-delay", 169 | "-moz-transition-delay", 170 | "-ms-transition-delay", 171 | "-o-transition-delay", 172 | "transition-delay", 173 | "-webkit-transition-timing-function", 174 | "-moz-transition-timing-function", 175 | "-ms-transition-timing-function", 176 | "-o-transition-timing-function", 177 | "transition-timing-function", 178 | "-webkit-transition-duration", 179 | "-moz-transition-duration", 180 | "-ms-transition-duration", 181 | "-o-transition-duration", 182 | "transition-duration", 183 | "-webkit-transition-property", 184 | "-moz-transition-property", 185 | "-ms-transition-property", 186 | "-o-transition-property", 187 | "transition-property", 188 | "-webkit-transform", 189 | "-moz-transform", 190 | "-ms-transform", 191 | "-o-transform", 192 | "transform", 193 | "-webkit-transform-origin", 194 | "-moz-transform-origin", 195 | "-ms-transform-origin", 196 | "-o-transform-origin", 197 | "transform-origin", 198 | "-webkit-animation", 199 | "-moz-animation", 200 | "-ms-animation", 201 | "-o-animation", 202 | "animation", 203 | "-webkit-animation-name", 204 | "-moz-animation-name", 205 | "-ms-animation-name", 206 | "-o-animation-name", 207 | "animation-name", 208 | "-webkit-animation-duration", 209 | "-moz-animation-duration", 210 | "-ms-animation-duration", 211 | "-o-animation-duration", 212 | "animation-duration", 213 | "-webkit-animation-play-state", 214 | "-moz-animation-play-state", 215 | "-ms-animation-play-state", 216 | "-o-animation-play-state", 217 | "animation-play-state", 218 | "-webkit-animation-timing-function", 219 | "-moz-animation-timing-function", 220 | "-ms-animation-timing-function", 221 | "-o-animation-timing-function", 222 | "animation-timing-function", 223 | "-webkit-animation-delay", 224 | "-moz-animation-delay", 225 | "-ms-animation-delay", 226 | "-o-animation-delay", 227 | "animation-delay", 228 | "-webkit-animation-iteration-count", 229 | "-moz-animation-iteration-count", 230 | "-ms-animation-iteration-count", 231 | "-o-animation-iteration-count", 232 | "animation-iteration-count", 233 | "-webkit-animation-direction", 234 | "-moz-animation-direction", 235 | "-ms-animation-direction", 236 | "-o-animation-direction", 237 | "animation-direction", 238 | "text-align", 239 | "-webkit-text-align-last", 240 | "-moz-text-align-last", 241 | "-ms-text-align-last", 242 | "text-align-last", 243 | "vertical-align", 244 | "white-space", 245 | "text-decoration", 246 | "text-emphasis", 247 | "text-emphasis-color", 248 | "text-emphasis-style", 249 | "text-emphasis-position", 250 | "text-indent", 251 | "-ms-text-justify", 252 | "text-justify", 253 | "letter-spacing", 254 | "word-spacing", 255 | "-ms-writing-mode", 256 | "text-outline", 257 | "text-transform", 258 | "text-wrap", 259 | "text-overflow", 260 | "-ms-text-overflow", 261 | "text-overflow-ellipsis", 262 | "text-overflow-mode", 263 | "-ms-word-wrap", 264 | "word-wrap", 265 | "word-break", 266 | "-ms-word-break", 267 | "-moz-tab-size", 268 | "-o-tab-size", 269 | "tab-size", 270 | "-webkit-hyphens", 271 | "-moz-hyphens", 272 | "hyphens", 273 | "pointer-events" 274 | ], 275 | [ 276 | "opacity", 277 | "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity", 278 | "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha", 279 | "-ms-interpolation-mode", 280 | "color", 281 | "border", 282 | "border-width", 283 | "border-style", 284 | "border-color", 285 | "border-top", 286 | "border-top-width", 287 | "border-top-style", 288 | "border-top-color", 289 | "border-right", 290 | "border-right-width", 291 | "border-right-style", 292 | "border-right-color", 293 | "border-bottom", 294 | "border-bottom-width", 295 | "border-bottom-style", 296 | "border-bottom-color", 297 | "border-left", 298 | "border-left-width", 299 | "border-left-style", 300 | "border-left-color", 301 | "-webkit-border-radius", 302 | "-moz-border-radius", 303 | "border-radius", 304 | "-webkit-border-top-left-radius", 305 | "-moz-border-radius-topleft", 306 | "border-top-left-radius", 307 | "-webkit-border-top-right-radius", 308 | "-moz-border-radius-topright", 309 | "border-top-right-radius", 310 | "-webkit-border-bottom-right-radius", 311 | "-moz-border-radius-bottomright", 312 | "border-bottom-right-radius", 313 | "-webkit-border-bottom-left-radius", 314 | "-moz-border-radius-bottomleft", 315 | "border-bottom-left-radius", 316 | "-webkit-border-image", 317 | "-moz-border-image", 318 | "-o-border-image", 319 | "border-image", 320 | "-webkit-border-image-source", 321 | "-moz-border-image-source", 322 | "-o-border-image-source", 323 | "border-image-source", 324 | "-webkit-border-image-slice", 325 | "-moz-border-image-slice", 326 | "-o-border-image-slice", 327 | "border-image-slice", 328 | "-webkit-border-image-width", 329 | "-moz-border-image-width", 330 | "-o-border-image-width", 331 | "border-image-width", 332 | "-webkit-border-image-outset", 333 | "-moz-border-image-outset", 334 | "-o-border-image-outset", 335 | "border-image-outset", 336 | "-webkit-border-image-repeat", 337 | "-moz-border-image-repeat", 338 | "-o-border-image-repeat", 339 | "border-image-repeat", 340 | "outline", 341 | "outline-width", 342 | "outline-style", 343 | "outline-color", 344 | "outline-offset", 345 | "background", 346 | "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader", 347 | "background-color", 348 | "background-image", 349 | "background-repeat", 350 | "background-attachment", 351 | "background-position", 352 | "background-position-x", 353 | "-ms-background-position-x", 354 | "background-position-y", 355 | "-ms-background-position-y", 356 | "-webkit-background-clip", 357 | "-moz-background-clip", 358 | "background-clip", 359 | "background-origin", 360 | "-webkit-background-size", 361 | "-moz-background-size", 362 | "-o-background-size", 363 | "background-size", 364 | "box-decoration-break", 365 | "-webkit-box-shadow", 366 | "-moz-box-shadow", 367 | "box-shadow", 368 | "filter:progid:DXImageTransform.Microsoft.gradient", 369 | "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient", 370 | "text-shadow" 371 | ] 372 | ] 373 | } --------------------------------------------------------------------------------