1.3K views
CSSAdd prefixes
1.cont { 2 display: flex; 3 align-items: center; 4 transform: scale(1); 5} 6 7input[type="checkbox"] { 8 height: 1.7rem; 9 width: 1.7rem; 10 margin: 5px; 11 display: inline-block; 12 appearance: none; 13 position: relative; 14 background-color: #F2ECFF; 15 border-radius: 15%; 16 cursor: pointer; 17 overflow: hidden; 18} 19 20input[type="checkbox"]::after { 21 content: ''; 22 display: block; 23 height: 0.9rem; 24 width: .4rem; 25 border-bottom: .31rem solid #a0ffe7; 26 border-right: .31rem solid #a0ffe7; 27 opacity: 0; 28 transform: rotate(45deg) translate(-50%, -50%); 29 position: absolute; 30 top: 45%; 31 left: 21%; 32 transition: .25s ease; 33} 34 35input[type="checkbox"]::before { 36 content: ''; 37 display: block; 38 height: 0; 39 width: 0; 40 background-color: #00C896; 41 border-radius: 50%; 42 opacity: .5; 43 transform: translate(-50%, -50%); 44 position: absolute; 45 top: 50%; 46 left: 50%; 47 transition: .3s ease; 48} 49 50input[type="checkbox"]:checked::before { 51 height: 130%; 52 width: 130%; 53 opacity: 100%; 54} 55 56input[type="checkbox"]:checked::after { 57 opacity: 100%; 58} 59 60span { 61 font-size: 2rem; 62}
HTML
1<label class="cont"> 2 <input type="checkbox" checked=""> 3 <span></span> 4</label>