Button by sashadubovyi
#e8e8e8
1.btn { 2 cursor: pointer; 3 position: relative; 4 padding-left: 30px; 5 padding-right: 30px; 6 padding-top: 10px; 7 padding-bottom: 10px; 8 font-size: 20px; 9 font-weight: 400; 10 border: none; 11 display: flex; 12 align-items: center; 13 background: transparent; 14 color: #f93d21; 15 transition: all 100ms; 16 overflow: hidden; 17 height: 50px; 18 width: 170px; 19} 20 21.left-span { 22 position: absolute; 23 left: 0; 24 height: 50px; 25 width: 15px; 26 border-top: 1px solid #f93d21; 27 border-bottom: 1px solid #f93d21; 28 border-left: 1px solid #f93d21; 29 transition: all 500ms; 30} 31 32.right-span { 33 position: absolute; 34 right: 0; 35 height: 50px; 36 width: 15px; 37 border-top: 1px solid #f93d21; 38 border-bottom: 1px solid #f93d21; 39 border-right: 1px solid #f93d21; 40 transition: all 500ms; 41} 42 43.text-btn { 44 position: absolute; 45 transform: translateX(0px); 46 width: 110px; 47 transition: all 200ms; 48} 49 50.hidden-text-btn { 51 position: absolute; 52 transform: translateX(150px); 53 opacity: 0; 54 transition: all 200ms; 55} 56 57.btn:hover .text-btn { 58 transform: translateX(-150px); 59 opacity: 0; 60} 61 62.btn:hover .hidden-text-btn { 63 transform: translateX(0px); 64 opacity: 1; 65} 66 67.btn:hover .right-span, 68.btn:hover .left-span { 69 width: 100%; 70} 71
245 views
245 views
MIT License