#212121
1.radio-input { 2 display: flex; 3 justify-content: space-between; 4 align-items: center; 5} 6 7.radio-input input { 8 display: none; 9} 10 11.radio-input input + label { 12 position: relative; 13 height: 40px; 14 width: 40px; 15 display: flex; 16 align-items: center; 17 justify-content: center; 18 font-size: 20px; 19 line-height: 1; 20 font-weight: 600; 21 text-shadow: 0 1px #bbb, 22 0 2px #bbb, 23 0 3px #bbb; 24 color: #fff; 25 text-align: center; 26 text-transform: uppercase; 27 cursor: pointer; 28 background-color: #444; 29 border-radius: 30px; 30 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); 31 padding: 4px; 32 transition: background-color 0.3s ease, transform 0.3s ease; 33} 34 35.radio-input label:hover { 36 background-color: #FBB03B; 37} 38 39.radio-input input + label::before { 40 content: ""; 41 position: absolute; 42 top: -5px; 43 left: -5px; 44 right: -5px; 45 bottom: -5px; 46 background-color: transparent; 47 border: 2px solid #fff; 48 border-bottom: 2px dashed #fff; 49 border-radius: 30px; 50 transition: border-color 0.3s ease; 51} 52 53.radio-input input:checked + label { 54 background-color: #D4145A; 55 background-image: linear-gradient(to top left, #D4145A, #FBB03B); 56 color: #000; 57 transform: scale(1.2); 58 z-index: 1; 59} 60 61.radio-input input:checked + label::before { 62 border-color: #D4145A; 63 transform: rotate(90deg); 64 transition: transform .15s ease; 65 animation: pulse-border 1s ease infinite alternate-reverse; 66} 67 68@keyframes pulse-border { 69 0% { 70 border-color: #D4145A; 71 } 72 73 50% { 74 border-color: #D4145A; 75 } 76 77 100% { 78 transform: scale(1.08); 79 border-color: #D4145A; 80 } 81} 82 83
742 views
742 views
Comments
MIT License