.mega-man-button { margin: .5rem; display: inline-block; border: none; appearance: none; background: #000; padding: 22px; position: relative; color: #fff; box-sizing: border-box; cursor: pointer; min-width: 120px; } .mega-man-button::-moz-focus-inner { border: none; } .mega-man-button.mega-man { border-radius: 16px; position: relative; background: #bcbe32; } .mega-man-button.mega-man:before { content: ''; display: block; position: absolute; top: 11px; right: 13px; bottom: 13px; left: 11px; box-sizing: border-box; border-radius: 3px; border: 2px solid #040707; box-shadow: -1px 0 0 4px #77aede, 0 0 0 9px #bae4ed, 0 0 0 12px #77aede, 1px 1px 0 13px #040707; } .mega-man-button.mega-man:focus:before, .mega-man-button.mega-man:hover:before { box-shadow: -1px 0 0 4px #f7c6dc, 0 0 0 9px #f3f3f3, 0 0 0 12px #f7c6dc, 1px 1px 0 13px #040707; } .mega-man-button.mega-man-ii { border: 2px solid #000; border-width: 0 2px 2px 0; box-shadow: inset 0 0 0 2px #003012, inset 0 0 0 4px #E7FFFF, inset 0 0 0 6px #003012, inset 0 0 0 8px #6CCDD0, inset 0 0 0 10px #A4FDF7, inset 0 0 0 12px #6CCDD0; } .mega-man-button.mega-man-ii:before { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: no-repeat top left/12px 12px linear-gradient(to right, #000 12px, #000), no-repeat top right/12px 12px linear-gradient(to right, #000 12px, #000), no-repeat bottom right/12px 12px linear-gradient(to right, #000 12px, #000), no-repeat bottom left/12px 12px linear-gradient(to right, #000 12px, #000 ); } .mega-man-button.mega-man-ii:focus:after, .mega-man-button.mega-man-ii:hover:after { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: /* top left quadrant */ no-repeat top 2px left 2px/8px 8px linear-gradient(to right, #fff 10px, #fff), /* top right quadrant */ no-repeat top 2px right 2px/8px 8px linear-gradient(to right, #fff 10px, #fff), /* bottom right quadrant */ no-repeat bottom 2px right 2px/8px 8px linear-gradient(to right, #fff 10px, #fff), /* bottom left quadrant */ no-repeat bottom 2px left 2px/8px 8px linear-gradient(to right, #fff 10px, #fff); } .mega-man-button.mega-man-iii { box-shadow: inset 2px 2px 0 #62C0E5, inset 6px 6px 0 #FDFCFE, inset 8px 8px 0 #62C0E5, inset 10px 10px 0 #2682D9, inset -2px -2px 0 #000725, inset -4px -4px 0 #2682D9, inset -6px -6px 0 #62C0E5, inset -10px -10px 0 #FDFCFE, inset 0 0 0 12px #000725, inset 0 0 0 14px #FDFCFE; } .mega-man-button.mega-man-iii:before { content: ''; display: block; position: absolute; top: -4px; right: -4px; bottom: -4px; left: -4px; background: /* top left quadrant */ no-repeat top 18px left 4px/10px 14px repeating-linear-gradient( #000725, #000725 2px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0) 4px), no-repeat top 6px left 6px/10px 10px radial-gradient( #0087F1 5px, rgba(0, 0, 0, 0) 5px), no-repeat top 6px left 6px/10px 10px radial-gradient( #0087F1 5px, rgba(0, 0, 0, 0) 5px), no-repeat top 4px left 4px/12px 12px radial-gradient( #000725 6px, rgba(0, 0, 0, 0) 6px), no-repeat top 2px left 2px/16px 16px radial-gradient( #FDFCFE 8px, rgba(0, 0, 0, 0) 8px), no-repeat top 0px left 0px/20px 20px radial-gradient( #000725 10px, rgba(0, 0, 0, 0) 10px), no-repeat top 4px left 18px/14px 10px repeating-linear-gradient(90deg, #000725, #000725 2px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0) 4px), /* top right quadrant */ no-repeat top 18px right 4px/10px 14px repeating-linear-gradient( #000725, #000725 2px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0) 4px), no-repeat top 6px right 4px/10px 10px radial-gradient( #0087F1 5px, rgba(0, 0, 0, 0) 5px), no-repeat top 4px right 4px/12px 12px radial-gradient( #000725 6px, rgba(0, 0, 0, 0) 6px), no-repeat top 2px right 2px/16px 16px radial-gradient( #FDFCFE 8px, rgba(0, 0, 0, 0) 8px), no-repeat top 0px right 0px/20px 20px radial-gradient( #000725 10px, rgba(0, 0, 0, 0) 10px), no-repeat top 4px right 18px/14px 10px repeating-linear-gradient(90deg, #000725, #000725 2px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0) 4px), no-repeat top 0px right 0px/20px 20px radial-gradient( #000725 10px, rgba(0, 0, 0, 0) 10px), /* bottom right quadrant */ no-repeat bottom 18px right 4px/10px 14px repeating-linear-gradient( #000725, #000725 2px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0) 4px), no-repeat bottom 4px right 4px/10px 10px radial-gradient( #0087F1 5px, rgba(0, 0, 0, 0) 5px), no-repeat bottom 4px right 4px/12px 12px radial-gradient( #000725 6px, rgba(0, 0, 0, 0) 6px), no-repeat bottom 2px right 2px/16px 16px radial-gradient( #FDFCFE 8px, rgba(0, 0, 0, 0) 8px), no-repeat bottom 0px right 0px/20px 20px radial-gradient( #000725 10px, rgba(0, 0, 0, 0) 10px), no-repeat bottom 4px right 18px/14px 10px repeating-linear-gradient(90deg, #000725, #000725 2px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0) 4px), /* bottom left quadrant */ no-repeat bottom 4px left 18px/14px 10px repeating-linear-gradient(90deg, #000725, #000725 2px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0) 4px), no-repeat bottom 4px left 6px/10px 10px radial-gradient( #0087F1 5px, rgba(0, 0, 0, 0) 5px), no-repeat bottom 4px left 4px/12px 12px radial-gradient( #000725 6px, rgba(0, 0, 0, 0) 6px), no-repeat bottom 2px left 2px/16px 16px radial-gradient( #FDFCFE 8px, rgba(0, 0, 0, 0) 8px), no-repeat bottom 0px left 0px/20px 20px radial-gradient( #000725 10px, rgba(0, 0, 0, 0) 10px), no-repeat bottom 18px left 4px/10px 14px repeating-linear-gradient( #000725, #000725 2px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0) 4px); } .mega-man-button.mega-man-iii:focus:after, .mega-man-button.mega-man-iii:hover:after { content: ''; display: block; position: absolute; top: -4px; right: -4px; bottom: -4px; left: -4px; background: /* top left quadrant */ no-repeat top 4px left 4px/14px 14px radial-gradient( #b5247a 6px, rgba(0, 0, 0, 0) 6px), no-repeat top 4px left 4px/12px 12px radial-gradient( #fff 6px, rgba(0, 0, 0, 0) 6px), no-repeat top 2px left 2px/16px 16px radial-gradient( #b5247a 8px, rgba(0, 0, 0, 0) 8px), /* top right quadrant */ no-repeat top 4px right 2px/14px 14px radial-gradient( #b5247a 6px, rgba(0, 0, 0, 0) 6px), no-repeat top 4px right 4px/12px 12px radial-gradient( #fff 6px, rgba(0, 0, 0, 0) 6px), no-repeat top 2px right 2px/16px 16px radial-gradient( #b5247a 8px, rgba(0, 0, 0, 0) 8px), /* bottom right quadrant */ no-repeat bottom 2px right 2px/14px 14px radial-gradient( #b5247a 6px, rgba(0, 0, 0, 0) 6px), no-repeat bottom 4px right 4px/12px 12px radial-gradient( #fff 6px, rgba(0, 0, 0, 0) 6px), no-repeat bottom 2px right 2px/16px 16px radial-gradient( #b5247a 8px, rgba(0, 0, 0, 0) 8px), /* bottom left quadrant */ no-repeat bottom 2px left 4px/14px 14px radial-gradient( #b5247a 6px, rgba(0, 0, 0, 0) 6px), no-repeat bottom 4px left 4px/12px 12px radial-gradient( #fff 6px, rgba(0, 0, 0, 0) 6px), no-repeat bottom 2px left 2px/16px 16px radial-gradient( #b5247a 8px, rgba(0, 0, 0, 0) 8px); } .mega-man-button.mega-man-iv { background: #3765af; border-radius: 6px; box-shadow: inset 0 0 0 2px #070909, inset 2px 2px 0 2px #bbbbbb, inset 4px 4px 0 2px #ffffff, inset 6px 6px 0 6px #bbbbbb, inset 12px 12px 0 2px #3765af, inset 14px 14px 0 4px #040707, inset -2px -2px 0 2px #3765af, inset -4px -4px 0 4px #bbbbbb, inset -8px -8px 0 4px #ffffff, inset -12px -12px 0 2px #bbbbbb, inset -14px -14px 0 2px #040707; } .mega-man-button.mega-man-iv:before { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: /* top left quadrant */ no-repeat top 6px left/51% 2px linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 8px, #ffffff 8px, #ffffff 13px, rgba(0, 0, 0, 0) 13px, rgba(0, 0, 0, 0) 48px, #ffffff 48px, #ffffff), no-repeat top 6px left 7px/2px 4px linear-gradient(to bottom, #ffffff, #ffffff 8px), no-repeat top 4px left/51% 8px linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 42px, #070909 42px, #070909), no-repeat top 12px left/51% 2px linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 44px, #bbbbbb 44px, #bbbbbb), no-repeat top 0px left 36px/8px 16px linear-gradient(to right, #070909, #070909 2px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0) 6px, #070909 6px, #070909 8px, rgba(0, 0, 0, 0) 8px), no-repeat top 34px left 0px/16px 8px linear-gradient(to bottom, #070909, #070909 2px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0) 6px, #070909 6px, #070909 8px, rgba(0, 0, 0, 0) 8px), no-repeat top 4px left 4px/22px 22px linear-gradient(to right bottom, #bbbbbb, #bbbbbb 2px, #070909 2px, #070909 12px, rgba(0, 0, 0, 0) 12px), no-repeat top 2px left 2px/28px 28px linear-gradient(to right bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 2px, #bbbbbb 2px, #bbbbbb 14px, #070909 14px, #070909 16px, #bbbbbb 16px, #bbbbbb 18px, #070909 18px, #070909 20px, rgba(0, 0, 0, 0) 20px), /* top right quadrant */ no-repeat top 6px right/51% 2px linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 8px, #ffffff 8px, #ffffff 11px, rgba(0, 0, 0, 0) 11px, rgba(0, 0, 0, 0) 48px, #ffffff 48px, #ffffff), no-repeat top 4px right/51% 8px linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 42px, #070909 44px, #070909), no-repeat top 12px right/51% 2px linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 44px, #bbbbbb 44px, #bbbbbb), no-repeat top 0px right 36px/8px 16px linear-gradient(to left, #070909, #070909 2px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0) 6px, #070909 6px, #070909 8px, rgba(0, 0, 0, 0) 8px), no-repeat top 34px right 0px/16px 8px linear-gradient(to bottom, #070909, #070909 2px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0) 6px, #070909 6px, #070909 8px, rgba(0, 0, 0, 0) 8px), no-repeat top 4px right 4px/22px 22px linear-gradient(to left bottom, #bbbbbb, #bbbbbb 2px, #070909 2px, #070909 12px, rgba(0, 0, 0, 0) 12px), no-repeat top 2px right 2px/28px 28px linear-gradient(to left bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 2px, #bbbbbb 2px, #bbbbbb 14px, #070909 14px, #070909 16px, #bbbbbb 16px, #bbbbbb 18px, #070909 18px, #070909 20px, rgba(0, 0, 0, 0) 20px), /* bottom right quadrant */ no-repeat bottom 8px right/51% 2px linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 8px, #ffffff 8px, #ffffff 11px, rgba(0, 0, 0, 0) 11px, rgba(0, 0, 0, 0) 48px, #ffffff 48px, #ffffff), no-repeat bottom 4px right/51% 8px linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 42px, #070909 44px, #070909), no-repeat bottom 2px right/51% 2px linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 44px, #bbbbbb 44px, #bbbbbb), no-repeat bottom 0px right 36px/8px 16px linear-gradient(to left, #070909, #070909 2px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0) 6px, #070909 6px, #070909 8px, rgba(0, 0, 0, 0) 8px), no-repeat bottom 34px right 0px/16px 8px linear-gradient(to top, #070909, #070909 2px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0) 6px, #070909 6px, #070909 8px, rgba(0, 0, 0, 0) 8px), no-repeat bottom 4px right 4px/22px 22px linear-gradient(to left top, #bbbbbb, #bbbbbb 2px, #070909 2px, #070909 12px, rgba(0, 0, 0, 0) 12px), no-repeat bottom 2px right 2px/28px 28px linear-gradient(to left top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 2px, #bbbbbb 2px, #bbbbbb 14px, #070909 14px, #070909 16px, #bbbbbb 16px, #bbbbbb 18px, #070909 18px, #070909 20px, rgba(0, 0, 0, 0) 20px), /* bottom left quadrant */ no-repeat bottom 8px left/51% 2px linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 8px, #ffffff 8px, #ffffff 11px, rgba(0, 0, 0, 0) 11px, rgba(0, 0, 0, 0) 48px, #ffffff 48px, #ffffff), no-repeat bottom 8px left 7px/2px 4px linear-gradient(to bottom, #ffffff, #ffffff 8px), no-repeat bottom 4px left/51% 8px linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 42px, #070909 44px, #070909), no-repeat bottom 2px left/51% 2px linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 44px, #bbbbbb 44px, #bbbbbb), no-repeat bottom 0px left 36px/8px 16px linear-gradient(to right, #070909, #070909 2px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0) 6px, #070909 6px, #070909 8px, rgba(0, 0, 0, 0) 8px), no-repeat bottom 34px left 0px/16px 8px linear-gradient(to top, #070909, #070909 2px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0) 6px, #070909 6px, #070909 8px, rgba(0, 0, 0, 0) 8px), no-repeat bottom 4px left 4px/22px 22px linear-gradient(to right top, #bbbbbb, #bbbbbb 2px, #070909 2px, #070909 12px, rgba(0, 0, 0, 0) 12px), no-repeat bottom 2px left 2px/28px 28px linear-gradient(to right top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 2px, #bbbbbb 2px, #bbbbbb 14px, #070909 14px, #070909 16px, #bbbbbb 16px, #bbbbbb 18px, #070909 18px, #070909 20px, rgba(0, 0, 0, 0) 20px); } .mega-man-button.mega-man-iv:focus:after, .mega-man-button.mega-man-iv:hover:after { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: /* top left quadrant */ no-repeat top 6px left/51% 2px linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 8px, #ffffff 8px, #ffffff 13px, rgba(0, 0, 0, 0) 13px, rgba(0, 0, 0, 0) 48px, #ffffff 48px, #ffffff), no-repeat top 6px left 7px/2px 4px linear-gradient(to bottom, #ffffff, #ffffff 8px), no-repeat top 2px left 2px/28px 28px linear-gradient(to right bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 2px, #f8d8a8 2px, #f8d8a8 14px, rgba(0,0,0,0) 14px), no-repeat top 4px left/51% 8px linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 44px, #f8d8a8 44px, #f8d8a8), /* top right quadrant */ no-repeat top 6px right/51% 2px linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 8px, #ffffff 8px, #ffffff 11px, rgba(0, 0, 0, 0) 11px, rgba(0, 0, 0, 0) 48px, #ffffff 48px, #ffffff), no-repeat top 2px right 2px/28px 28px linear-gradient(to left bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 2px, #f8d8a8 2px, #f8d8a8 14px, rgba(0,0,0,0) 14px), no-repeat top 4px right/51% 8px linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 44px, #f8d8a8 44px, #f8d8a8), /* bottom right quadrant */ no-repeat bottom 8px right/51% 2px linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 8px, #ffffff 8px, #ffffff 11px, rgba(0, 0, 0, 0) 11px, rgba(0, 0, 0, 0) 48px, #ffffff 48px, #ffffff), no-repeat bottom 2px right 2px/28px 28px linear-gradient(to left top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 2px, #f8d8a8 2px, #f8d8a8 14px, rgba(0,0,0,0) 14px), no-repeat bottom 4px right/51% 8px linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 44px, #f8d8a8 44px, #f8d8a8), /* bottom left quadrant */ no-repeat bottom 8px left/51% 2px linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 8px, #ffffff 8px, #ffffff 11px, rgba(0, 0, 0, 0) 11px, rgba(0, 0, 0, 0) 48px, #ffffff 48px, #ffffff), no-repeat bottom 8px left 7px/2px 4px linear-gradient(to bottom, #ffffff, #ffffff 8px), no-repeat bottom 2px left 2px/28px 28px linear-gradient(to right top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 2px, #f8d8a8 2px, #f8d8a8 14px, rgba(0,0,0,0) 14px), no-repeat bottom 4px left/51% 8px linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 44px, #f8d8a8 44px, #f8d8a8); } .mega-man-button.mega-man-v { border-right: 2px solid #040707; box-shadow: inset 0 0 0 2px #040707, inset 2px 2px 0 2px #77aede, inset 4px 4px 0 4px #ffffff, inset 8px 8px 0 2px #77aede, inset 10px 10px 0 2px #6988bc, inset 12px 12px 0 4px #040707, inset 0 -2px 0 2px #040707, inset -2px -4px 0 2px #6988bc, inset -4px -6px 0 2px #77aede, inset -6px -8px 0 4px #ffffff, inset -10px -12px 0 2px #77aede, inset -12px -14px 0 4px #040707; } .mega-man-button.mega-man-v:before { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: /* top left quadrant */ no-repeat top 5px left 0px/25px 2px linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 8px, #ffffff 8px, #ffffff 11px, rgba(0, 0, 0, 0) 11px, rgba(0, 0, 0, 0) 22px, #ffffff 22px), no-repeat top 2px left 4px/12px 10px radial-gradient( #040707, #040707 6px, rgba(0, 0, 0, 0) 6px), no-repeat top 2px left 18px/12px 10px radial-gradient( #040707, #040707 6px, rgba(0, 0, 0, 0) 6px), no-repeat top 0px left 0px/34px 2px linear-gradient(to right, #77aede, #77aede 2px, #ffffff 2px, #ffffff 32px, #3765af 32px), no-repeat top 2px left 0px/34px 10px linear-gradient(to right, #ffffff, #ffffff 2px, #3765af 2px, #3765af 32px, #77aede 32px), no-repeat top 12px left 0px/34px 2px linear-gradient(to right, #3765af, #3765af 2px, #77aede 2px, #77aede 32px, #3765af 32px), no-repeat top left/36px 16px linear-gradient(to right, #040707, #040707), no-repeat top 20px left 0px/16px 8px linear-gradient(to right, #040707, #040707 2px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0) 6px, #040707 6px, #040707 8px, rgba(0, 0, 0, 0) 8px, rgba(0, 0, 0, 0) 12px, #040707 12px), no-repeat top 16px left 0px/16px 16px linear-gradient(to right, #77aede, #77aede 2px, #ffffff 2px, #ffffff 6px, #77aede 6px, #77aede 10px, #3765af 10px), no-repeat top 16px left 0px/18px 18px linear-gradient( #040707, #040707), /* top right quadrant */ no-repeat top 5px right 0px/25px 2px linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 8px, #ffffff 8px, #ffffff 11px, rgba(0, 0, 0, 0) 11px, rgba(0, 0, 0, 0) 22px, #ffffff 22px), no-repeat top 2px right 4px/12px 10px radial-gradient( #040707, #040707 6px, rgba(0, 0, 0, 0) 6px), no-repeat top 2px right 18px/12px 10px radial-gradient( #040707, #040707 6px, rgba(0, 0, 0, 0) 6px), no-repeat top 0px right 0px/34px 2px linear-gradient(to right, #77aede, #77aede 2px, #ffffff 2px, #ffffff 32px, #3765af 32px), no-repeat top 2px right 0px/34px 10px linear-gradient(to right, #ffffff, #ffffff 2px, #3765af 2px, #3765af 32px, #77aede 32px), no-repeat top 12px right 0px/34px 2px linear-gradient(to right, #3765af, #3765af 2px, #77aede 2px, #77aede 32px, #3765af 32px), no-repeat top right/34px 16px linear-gradient(to right, #040707, #040707), no-repeat top 20px right 0px/16px 8px linear-gradient(to right, #040707, #040707 2px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0) 6px, #040707 6px, #040707 8px, rgba(0, 0, 0, 0) 8px, rgba(0, 0, 0, 0) 12px, #040707 12px), no-repeat top 16px right 0px/16px 16px linear-gradient(to right, #77aede, #77aede 2px, #ffffff 2px, #ffffff 8px, #77aede 8px, #77aede 12px, #3765af 12px), no-repeat top 16px right 0px/18px 18px linear-gradient( #040707, #040707), /* bottom right quadrant */ no-repeat bottom 10px right 0px/25px 2px linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 8px, #ffffff 8px, #ffffff 11px, rgba(0, 0, 0, 0) 11px, rgba(0, 0, 0, 0) 22px, #ffffff 22px), no-repeat bottom 4px right 4px/12px 10px radial-gradient( #040707, #040707 6px, rgba(0, 0, 0, 0) 6px), no-repeat bottom 4px right 18px/12px 10px radial-gradient( #040707, #040707 6px, rgba(0, 0, 0, 0) 6px), no-repeat bottom 14px right 0px/34px 2px linear-gradient(to right, #77aede, #77aede 2px, #ffffff 2px, #ffffff 32px, #3765af 32px), no-repeat bottom 2px right 0px/34px 2px linear-gradient(to right, #3765af, #3765af 2px, #77aede 2px, #77aede 32px, #3765af 32px), no-repeat bottom 4px right 0px/34px 10px linear-gradient(to right, #ffffff, #ffffff 2px, #3765af 2px, #3765af 32px, #77aede 32px), no-repeat bottom 20px right 0px/16px 8px linear-gradient(to right, #040707, #040707 2px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0) 6px, #040707 6px, #040707 8px, rgba(0, 0, 0, 0) 8px, rgba(0, 0, 0, 0) 12px, #040707 12px), no-repeat bottom 16px right 0px/16px 16px linear-gradient(to right, #77aede, #77aede 2px, #ffffff 2px, #ffffff 8px, #77aede 8px, #77aede 12px, #3765af 12px), no-repeat bottom 16px right 0px/18px 18px linear-gradient( #040707, #040707), /* bottom left quadrant */ no-repeat bottom 10px left 0px/25px 2px linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 8px, #ffffff 8px, #ffffff 11px, rgba(0, 0, 0, 0) 11px, rgba(0, 0, 0, 0) 22px, #ffffff 22px), no-repeat bottom 4px left 4px/12px 10px radial-gradient( #040707, #040707 6px, rgba(0, 0, 0, 0) 6px), no-repeat bottom 4px left 18px/12px 10px radial-gradient( #040707, #040707 6px, rgba(0, 0, 0, 0) 6px), no-repeat bottom 14px left 0px/34px 2px linear-gradient(to right, #77aede, #77aede 2px, #ffffff 2px, #ffffff 32px, #3765af 32px), no-repeat bottom 2px left 0px/34px 2px linear-gradient(to right, #3765af, #3765af 2px, #77aede 2px, #77aede 32px, #3765af 32px), no-repeat bottom 4px left 0px/34px 10px linear-gradient(to right, #ffffff, #ffffff 2px, #3765af 2px, #3765af 32px, #77aede 32px), no-repeat bottom left/36px 16px linear-gradient(to right, #040707, #040707), no-repeat bottom 20px left 0px/16px 8px linear-gradient(to right, #040707, #040707 2px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0) 6px, #040707 6px, #040707 8px, rgba(0, 0, 0, 0) 8px, rgba(0, 0, 0, 0) 12px, #040707 12px), no-repeat bottom 16px left 0px/16px 16px linear-gradient(to right, #77aede, #77aede 2px, #ffffff 2px, #ffffff 6px, #77aede 6px, #77aede 10px, #3765af 10px), no-repeat bottom 16px left 0px/18px 18px linear-gradient( #040707, #040707); } .mega-man-button.mega-man-v:focus:after, .mega-man-button.mega-man-v:hover:after { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: /* top left quadrant */ no-repeat top 5px left 0px/25px 2px linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 8px, #ffffff 8px, #ffffff 11px, rgba(0, 0, 0, 0) 11px, rgba(0, 0, 0, 0) 22px, #ffffff 22px), no-repeat top 2px left 4px/12px 10px radial-gradient( #feccc6, #feccc6 6px, rgba(0, 0, 0, 0) 6px), no-repeat top 2px left 18px/12px 10px radial-gradient( #feccc6, #feccc6 6px, rgba(0, 0, 0, 0) 6px), /* top right quadrant */ no-repeat top 5px right 0px/25px 2px linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 8px, #ffffff 8px, #ffffff 11px, rgba(0, 0, 0, 0) 11px, rgba(0, 0, 0, 0) 22px, #ffffff 22px), no-repeat top 2px right 4px/12px 10px radial-gradient( #feccc6, #feccc6 6px, rgba(0, 0, 0, 0) 6px), no-repeat top 2px right 18px/12px 10px radial-gradient( #feccc6, #feccc6 6px, rgba(0, 0, 0, 0) 6px), /* bottom right quadrant */ no-repeat bottom 10px right 0px/25px 2px linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 8px, #ffffff 8px, #ffffff 11px, rgba(0, 0, 0, 0) 11px, rgba(0, 0, 0, 0) 22px, #ffffff 22px), no-repeat bottom 4px right 4px/12px 10px radial-gradient( #feccc6, #feccc6 6px, rgba(0, 0, 0, 0) 6px), no-repeat bottom 4px right 18px/12px 10px radial-gradient( #feccc6, #feccc6 6px, rgba(0, 0, 0, 0) 6px), /* bottom left quadrant */ no-repeat bottom 10px left 0px/25px 2px linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 8px, #ffffff 8px, #ffffff 11px, rgba(0, 0, 0, 0) 11px, rgba(0, 0, 0, 0) 22px, #ffffff 22px), no-repeat bottom 4px left 4px/12px 10px radial-gradient( #feccc6, #feccc6 6px, rgba(0, 0, 0, 0) 6px), no-repeat bottom 4px left 18px/12px 10px radial-gradient( #feccc6, #feccc6 6px, rgba(0, 0, 0, 0) 6px); } .mega-man-button.mega-man-vi { box-shadow: inset 0px 0px 0 2px #040707, inset 2px 2px 0 2px #77aede, inset 4px 4px 0 2px #ffffff, inset 6px 6px 0 2px #77aede, inset 8px 8px 0 2px #3765af, inset -2px -2px 0 2px #3765af, inset -4px -4px 0 2px #77aede, inset -6px -6px 0 2px #ffffff, inset -8px -8px 0 2px #77aede; } .mega-man-button.mega-man-vi:before { content: ''; display: block; position: absolute; top: -2px; right: -2px; bottom: -2px; left: -2px; box-sizing: border-box; background: /* top left quadrant */ no-repeat top 18px left 0px/20px 2px linear-gradient( #040707, #040707), no-repeat top 16px left 2px/14px 16px linear-gradient(to right, #77aede, #77aede 2px, #ffffff 2px, #ffffff 6px, #77aede 6px, #77aede 10px, #3765af 10px), no-repeat top 16px left 0px/20px 18px linear-gradient( #040707, #040707), no-repeat top 36px left 2px/14px 2px linear-gradient(to right, #77aede, #77aede 2px, #ffffff 2px, #ffffff 6px, #77aede 6px, #77aede 10px, #3765af 10px), no-repeat top 36px left 0px/20px 4px linear-gradient( #040707, #040707), no-repeat top 4px left 4px/20px 10px linear-gradient( #040707, #040707 8px, #3765af 8px), no-repeat top 2px left 26px/2px 12px linear-gradient(to bottom, #77aede, #77aede 2px, #ffffff 2px, #ffffff 6px, #77aede 6px, #77aede 10px, #3765af 10px), no-repeat top 2px left 2px/22px 12px linear-gradient(to bottom right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 2px, #77aede 2px, #77aede), no-repeat top 2px left 28px/2px 12px linear-gradient(to bottom right, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), no-repeat top left/28px 16px linear-gradient(to bottom right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 2px, #040707 2px, #040707), no-repeat top 2px left/51% 2px linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 42px, #77aede 42px, #77aede 44px, rgba(0, 0, 0, 0) 44px, rgba(0, 0, 0, 0) 46px, #74addf 46px), no-repeat top 4px left/51% 2px linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 42px, #ffffff 42px, #ffffff 44px, rgba(0, 0, 0, 0) 44px, rgba(0, 0, 0, 0) 46px, #040707 46px), no-repeat top 6px left/51% 2px linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 42px, #ffffff 42px, #ffffff 44px, rgba(0, 0, 0, 0) 44px, rgba(0, 0, 0, 0) 46px, #ffffff 46px), no-repeat top 8px left/51% 2px linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 42px, #74addf 42px, #74addf 44px, rgba(0, 0, 0, 0) 44px, rgba(0, 0, 0, 0) 46px, #74addf 46px, #74addf 56px, #040707 56px), no-repeat top 10px left/51% 2px linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 42px, #74addf 42px, #74addf 44px, rgba(0, 0, 0, 0) 44px, rgba(0, 0, 0, 0) 46px, #040707 46px), no-repeat top 12px left/51% 2px linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 42px, #3563b1 42px, #3563b1 44px, rgba(0, 0, 0, 0) 44px, rgba(0, 0, 0, 0) 46px, #3563b1 46px), no-repeat top left/51% 16px linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 44px, #040707 44px), /* top right quadrant */ no-repeat top 18px right 0px/20px 2px linear-gradient( #040707, #040707), no-repeat top 16px right 2px/14px 16px linear-gradient(to right, #77aede, #77aede 2px, #ffffff 2px, #ffffff 6px, #77aede 6px, #77aede 10px, #3765af 10px), no-repeat top 16px right 0px/20px 18px linear-gradient( #040707, #040707), no-repeat top 36px right 2px/14px 2px linear-gradient(to right, #77aede, #77aede 2px, #ffffff 2px, #ffffff 6px, #77aede 6px, #77aede 10px, #3765af 10px), no-repeat top 36px right 0px/20px 4px linear-gradient( #040707, #040707), no-repeat top 4px right 4px/20px 10px linear-gradient( #040707, #040707 8px, #3765af 8px), no-repeat top 2px right 26px/2px 12px linear-gradient(to bottom, #77aede, #77aede 2px, #ffffff 2px, #ffffff 6px, #77aede 6px, #77aede 10px, #3765af 10px), no-repeat top 2px right 2px/22px 12px linear-gradient(to bottom left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 2px, #77aede 2px, #77aede), no-repeat top 2px right 40px/2px 12px linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), no-repeat top right/28px 16px linear-gradient(to bottom left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 2px, #040707 2px, #040707), no-repeat top 2px right/51% 2px linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 42px, #77aede 42px, #77aede 44px, rgba(0, 0, 0, 0) 44px, rgba(0, 0, 0, 0) 46px, #3765af 46px, #3765af 56px, #74addf 56px), no-repeat top 4px right/51% 2px linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 42px, #ffffff 42px, #ffffff 44px, rgba(0, 0, 0, 0) 44px, rgba(0, 0, 0, 0) 46px, #040707 46px), no-repeat top 6px right/51% 2px linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 42px, #ffffff 42px, #ffffff 44px, rgba(0, 0, 0, 0) 44px, rgba(0, 0, 0, 0) 46px, #77aede 46px, #77aede 56px, #ffffff 56px), no-repeat top 8px right/51% 2px linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 42px, #ffffff 42px, #ffffff 44px, rgba(0, 0, 0, 0) 44px, rgba(0, 0, 0, 0) 46px, #040707 46px), no-repeat top 10px right/51% 2px linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 42px, #74addf 42px, #74addf 44px, rgba(0, 0, 0, 0) 44px, rgba(0, 0, 0, 0) 46px, #040707 46px), no-repeat top 12px right/51% 2px linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 42px, #3563b1 42px, #3563b1 44px, rgba(0, 0, 0, 0) 44px, rgba(0, 0, 0, 0) 46px, #3563b1 46px), no-repeat top right/51% 16px linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 44px, #040707 44px), /* bottom right quadrant */ no-repeat bottom 18px right 0px/20px 2px linear-gradient( #040707, #040707), no-repeat bottom 16px right 2px/14px 16px linear-gradient(to right, #77aede, #77aede 2px, #ffffff 2px, #ffffff 6px, #77aede 6px, #77aede 10px, #3765af 10px), no-repeat bottom 16px right 0px/20px 18px linear-gradient( #040707, #040707), no-repeat bottom 38px right 2px/14px 2px linear-gradient(to right, #77aede, #77aede 2px, #ffffff 2px, #ffffff 6px, #77aede 6px, #77aede 10px, #3765af 10px), no-repeat bottom 36px right 0px/20px 4px linear-gradient( #040707, #040707), no-repeat bottom 2px right 4px/20px 10px linear-gradient( #040707, #040707 8px, #3765af 8px), no-repeat bottom 2px right 26px/2px 12px linear-gradient(to bottom, #77aede, #77aede 2px, #ffffff 2px, #ffffff 6px, #77aede 6px, #77aede 10px, #3765af 10px), no-repeat bottom 2px right 2px/22px 12px linear-gradient(to top left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 2px, #77aede 2px, #77aede), no-repeat bottom 2px right 40px/2px 12px linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), no-repeat bottom right/28px 16px linear-gradient(to top left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 2px, #040707 2px, #040707), no-repeat bottom 12px right/51% 2px linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 42px, #77aede 42px, #77aede 44px, rgba(0, 0, 0, 0) 44px, rgba(0, 0, 0, 0) 46px, #3765af 46px, #3765af 56px, #74addf 56px), no-repeat bottom 10px right/51% 2px linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 42px, #ffffff 42px, #ffffff 44px, rgba(0, 0, 0, 0) 44px, rgba(0, 0, 0, 0) 46px, #040707 46px), no-repeat bottom 8px right/51% 2px linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 42px, #ffffff 42px, #ffffff 44px, rgba(0, 0, 0, 0) 44px, rgba(0, 0, 0, 0) 46px, #77aede 46px, #77aede 56px, #ffffff 56px), no-repeat bottom 6px right/51% 2px linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 42px, #ffffff 42px, #ffffff 44px, rgba(0, 0, 0, 0) 44px, rgba(0, 0, 0, 0) 46px, #040707 46px), no-repeat bottom 4px right/51% 2px linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 42px, #74addf 42px, #74addf 44px, rgba(0, 0, 0, 0) 44px, rgba(0, 0, 0, 0) 46px, #040707 46px), no-repeat bottom 2px right/51% 2px linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 42px, #3563b1 42px, #3563b1 44px, rgba(0, 0, 0, 0) 44px, rgba(0, 0, 0, 0) 46px, #3563b1 46px), no-repeat bottom right/51% 16px linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 44px, #040707 44px), /* bottom left quadrant */ no-repeat bottom 18px left 0px/20px 2px linear-gradient( #040707, #040707), no-repeat bottom 16px left 2px/14px 16px linear-gradient(to right, #77aede, #77aede 2px, #ffffff 2px, #ffffff 6px, #77aede 6px, #77aede 10px, #3765af 10px), no-repeat bottom 16px left 0px/20px 18px linear-gradient( #040707, #040707), no-repeat bottom 38px left 2px/14px 2px linear-gradient(to right, #77aede, #77aede 2px, #ffffff 2px, #ffffff 6px, #77aede 6px, #77aede 10px, #3765af 10px), no-repeat bottom 36px left 0px/20px 4px linear-gradient( #040707, #040707), no-repeat bottom 2px left 4px/20px 10px linear-gradient( #040707, #040707 8px, #3765af 8px), no-repeat bottom 2px left 26px/2px 12px linear-gradient(to bottom, #77aede, #77aede 2px, #ffffff 2px, #ffffff 6px, #77aede 6px, #77aede 10px, #3765af 10px), no-repeat bottom 2px left 2px/22px 12px linear-gradient(to top right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 2px, #77aede 2px, #77aede), no-repeat bottom 2px left 28px/2px 12px linear-gradient(to top right, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), no-repeat bottom left/28px 16px linear-gradient(to top right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 2px, #040707 2px, #040707), no-repeat bottom 12px left/51% 2px linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 42px, #77aede 42px, #77aede 44px, rgba(0, 0, 0, 0) 44px, rgba(0, 0, 0, 0) 46px, #74addf 46px), no-repeat bottom 10px left/51% 2px linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 42px, #ffffff 42px, #ffffff 44px, rgba(0, 0, 0, 0) 44px, rgba(0, 0, 0, 0) 46px, #040707 46px), no-repeat bottom 8px left/51% 2px linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 42px, #ffffff 42px, #ffffff 44px, rgba(0, 0, 0, 0) 44px, rgba(0, 0, 0, 0) 46px, #ffffff 46px), no-repeat bottom 6px left/51% 2px linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 42px, #74addf 42px, #74addf 44px, rgba(0, 0, 0, 0) 44px, rgba(0, 0, 0, 0) 46px, #74addf 46px, #74addf 56px, #040707 56px), no-repeat bottom 4px left/51% 2px linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 42px, #74addf 42px, #74addf 44px, rgba(0, 0, 0, 0) 44px, rgba(0, 0, 0, 0) 46px, #040707 46px), no-repeat bottom 2px left/51% 2px linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 42px, #3563b1 42px, #3563b1 44px, rgba(0, 0, 0, 0) 44px, rgba(0, 0, 0, 0) 46px, #3563b1 46px), no-repeat bottom left/51% 16px linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 44px, #040707 44px); } .mega-man-button.mega-man-vi:focus:after, .mega-man-button.mega-man-vi:hover:after { content: ''; display: block; position: absolute; top: -2px; right: -2px; bottom: -2px; left: -2px; background: /* top left quadrant */ no-repeat top 4px left 4px/20px 8px linear-gradient(to bottom, #f7dcb2 2px, #ffffff 2px, #ffffff 6px, #f7dcb2 6px), /* top right quadrant */ no-repeat top 4px right 4px/20px 8px linear-gradient(to bottom, #f7dcb2 2px, #ffffff 2px, #ffffff 6px, #f7dcb2 6px), /* bottom right quadrant */ no-repeat bottom 4px right 4px/20px 8px linear-gradient(to bottom, #f7dcb2 2px, #ffffff 2px, #ffffff 6px, #f7dcb2 6px), /* bottom left quadrant */ no-repeat bottom 4px left 4px/20px 8px linear-gradient(to bottom, #f7dcb2 2px, #ffffff 2px, #ffffff 6px, #f7dcb2 6px); }