Button by barisdogansutcu
#e8e8e8
1.button-options .content { 2 display: flex; 3 align-items: center; 4 justify-content: center; 5 border: solid 2px #29429b; 6 border-radius: 4px; 7 position: relative; 8} 9.button-options .content .label-layout { 10 min-width: 45px; 11 height: 45px; 12 display: flexa; 13 align-items: center; 14 justify-content: center; 15} 16.button-options .content .label-layout :is(b, i, u) { 17 display: grid; 18 place-content: center; 19 height: 100%; 20 color: #29429b; 21 font-size: 17px; 22 line-height: 1; 23 cursor: pointer; 24} 25.button-options .content .label-layout[for="italicInput"] { 26 border-left: solid 2px #29429b; 27 border-right: solid 2px #29429b; 28 min-width: 49px; 29} 30.button-options .content input[type="checkbox"]:checked + .label-layout { 31 background-color: #29429b34; 32} 33#boldInput:checked ~ .title { 34 font-weight: bold; 35} 36#italicInput:checked ~ .title { 37 font-style: italic; 38} 39#underlineInput:checked ~ .title { 40 text-decoration: underline; 41} 42.button-options .title { 43 font-size: 13px; 44 display: flex; 45 align-items: center; 46 justify-content: center; 47 margin-top: 5px; 48 position: absolute; 49 bottom: 0; 50 top: 2px; 51 transform: translateY(100%); 52 color: #29429b; 53} 54
428 views
428 views
Variations
1 MIT License