Button by OnCloud125252
#212121
1/* Note that you only needs to edit the config to customize the button! */ 2 3.signInButton { 4 /* Config start */ 5 --signIn_width: 6rem; 6 --signIn_height: 2.5rem; 7 --signIn_bottomLeftTriangleSideLength: 1rem; 8 --signIn_topRightTriangleSideLength: 0.9rem; 9 /* Config end */ 10 position: relative; 11 display: flex; 12 justify-content: center; 13 align-items: center; 14 border: 1px solid white; 15 width: 6rem; 16 height: 2.5rem; 17 background-color: #000000; 18 overflow: hidden; 19} 20 21.signInButton::before { 22 position: absolute; 23 content: ""; 24 bottom: 0; 25 left: 0; 26 width: 0; 27 height: 0; 28 border-width: 0 var(--signIn_bottomLeftTriangleSideLength) var(--signIn_bottomLeftTriangleSideLength) 0; 29 border-style: solid; 30 border-color: transparent transparent white transparent; 31 transition-timing-function: ease-in-out; 32 transition-duration: 0.2s; 33} 34 35.signInButton::after { 36 position: absolute; 37 content: ""; 38 top: 0; 39 right: 0; 40 width: calc(var(--signIn_topRightTriangleSideLength) * 1.4142135623730950488016887242097); 41 height: calc(var(--signIn_topRightTriangleSideLength) * 1.4142135623730950488016887242097); 42 outline: 1px solid white; 43 transform: translate(50%, -50%) rotate(45deg); 44 transition-timing-function: ease-in-out; 45 transition-duration: 0.2s; 46} 47 48.signInButton:hover { 49 cursor: pointer; 50} 51 52.signInButton:hover::before { 53 --signIn_bottomLeftTriangleSideLength: calc(var(--signIn_width) + var(--signIn_height) - var(--signIn_topRightTriangleSideLength) + (var(--signIn_topRightTriangleSideLength) * 0.3)); 54} 55 56.signInButton:focus-visible::before { 57 --signIn_bottomLeftTriangleSideLength: calc(var(--signIn_width) + var(--signIn_height) - var(--signIn_topRightTriangleSideLength) + (var(--signIn_topRightTriangleSideLength) * 0.3)); 58} 59 60.signInButton:hover::after { 61 transform: translate(calc(50% + var(--signIn_topRightTriangleSideLength) * 0.1), calc((50% + var(--signIn_topRightTriangleSideLength) * 0.1) * -1)) rotate(45deg); 62} 63 64.signInButton:focus-visible::after { 65 transform: translate(calc(50% + var(--signIn_topRightTriangleSideLength) * 0.1), calc((50% + var(--signIn_topRightTriangleSideLength) * 0.1) * -1)) rotate(45deg); 66} 67 68.signInButton:hover>.signInButtonText { 69 color: black; 70} 71 72.signInButton:focus-visible>.signInButtonText { 73 color: black; 74} 75 76.signInButtonText { 77 margin: auto 0; 78 color: white; 79 font-size: 0.875rem; 80 line-height: 1.25rem; 81 font-weight: 700; 82 text-align: center; 83 z-index: 1; 84 transition-timing-function: ease-in-out; 85 transition-duration: 0.2s; 86}
510 views
510 views
MIT License