#212121
1/* Note that you only needs to edit the config to customize the button! */ 2 3.plusButton { 4 /* Config start */ 5 --plus_sideLength: 2.5rem; 6 --plus_topRightTriangleSideLength: 0.9rem; 7 /* Config end */ 8 position: relative; 9 display: flex; 10 justify-content: center; 11 align-items: center; 12 border: 1px solid white; 13 width: var(--plus_sideLength); 14 height: var(--plus_sideLength); 15 background-color: #000000; 16 overflow: hidden; 17} 18 19.plusButton::before { 20 position: absolute; 21 content: ""; 22 top: 0; 23 right: 0; 24 width: 0; 25 height: 0; 26 border-width: 0 var(--plus_topRightTriangleSideLength) var(--plus_topRightTriangleSideLength) 0; 27 border-style: solid; 28 border-color: transparent white transparent transparent; 29 transition-timing-function: ease-in-out; 30 transition-duration: 0.2s; 31} 32 33.plusButton:hover { 34 cursor: pointer; 35} 36 37.plusButton:hover::before { 38 --plus_topRightTriangleSideLength: calc(var(--plus_sideLength) * 2); 39} 40 41.plusButton:focus-visible::before { 42 --plus_topRightTriangleSideLength: calc(var(--plus_sideLength) * 2); 43} 44 45.plusButton>.plusIcon { 46 fill: white; 47 width: calc(var(--plus_sideLength) * 0.7); 48 height: calc(var(--plus_sideLength) * 0.7); 49 z-index: 1; 50 transition-timing-function: ease-in-out; 51 transition-duration: 0.2s; 52} 53 54.plusButton:hover>.plusIcon { 55 fill: black; 56 transform: rotate(180deg); 57} 58 59.plusButton:focus-visible>.plusIcon { 60 fill: black; 61 transform: rotate(180deg); 62}
Comments
MIT License