#212121
1.icon-btn { 2 width: 50px; 3 height: 50px; 4 border: 1px solid #cdcdcd; 5 background: white; 6 border-radius: 25px; 7 overflow: hidden; 8 position: relative; 9 transition: width 0.2s ease-in-out; 10 font-weight: 500; 11 font-family: inherit; 12} 13 14.add-btn:hover { 15 width: 120px; 16} 17 18.add-btn::before, 19.add-btn::after { 20 transition: width 0.2s ease-in-out, border-radius 0.2s ease-in-out; 21 content: ""; 22 position: absolute; 23 height: 4px; 24 width: 10px; 25 top: calc(50% - 2px); 26 background: seagreen; 27} 28 29.add-btn::after { 30 right: 14px; 31 overflow: hidden; 32 border-top-right-radius: 2px; 33 border-bottom-right-radius: 2px; 34} 35 36.add-btn::before { 37 left: 14px; 38 border-top-left-radius: 2px; 39 border-bottom-left-radius: 2px; 40} 41 42.icon-btn:focus { 43 outline: none; 44} 45 46.btn-txt { 47 opacity: 0; 48 transition: opacity 0.2s; 49} 50 51.add-btn:hover::before, 52.add-btn:hover::after { 53 width: 4px; 54 border-radius: 2px; 55} 56 57.add-btn:hover .btn-txt { 58 opacity: 1; 59} 60 61.add-icon::after, 62.add-icon::before { 63 transition: all 0.2s ease-in-out; 64 content: ""; 65 position: absolute; 66 height: 20px; 67 width: 2px; 68 top: calc(50% - 10px); 69 background: seagreen; 70 overflow: hidden; 71} 72 73.add-icon::before { 74 left: 22px; 75 border-top-left-radius: 2px; 76 border-bottom-left-radius: 2px; 77} 78 79.add-icon::after { 80 right: 22px; 81 border-top-right-radius: 2px; 82 border-bottom-right-radius: 2px; 83} 84 85.add-btn:hover .add-icon::before { 86 left: 15px; 87 height: 4px; 88 top: calc(50% - 2px); 89} 90 91.add-btn:hover .add-icon::after { 92 right: 15px; 93 height: 4px; 94 top: calc(50% - 2px); 95}
8.4K views
8.4K views
Comments
MIT License