1.3K views
1.btn { 2 cursor: pointer; 3 width: 50px; 4 height: 50px; 5 border: none; 6 position: relative; 7 border-radius: 10px; 8 -webkit-box-shadow: 1px 1px 5px .2px #00000035; 9 box-shadow: 1px 1px 5px .2px #00000035; 10 -webkit-transition: .2s linear; 11 transition: .2s linear; 12 transition-delay: .2s; 13 display: -webkit-box; 14 display: -ms-flexbox; 15 display: flex; 16 -webkit-box-align: center; 17 -ms-flex-align: center; 18 align-items: center; 19 -webkit-box-pack: center; 20 -ms-flex-pack: center; 21 justify-content: space-between; 22} 23 24.btn:hover { 25 width: 150px; 26 transition-delay: .2s; 27} 28 29.btn:hover > .paragraph { 30 visibility: visible; 31 opacity: 1; 32 -webkit-transition-delay: .4s; 33 transition-delay: .4s; 34} 35 36.btn:hover > .icon-wrapper .icon { 37 transform: scale(1.1); 38} 39 40.bnt:hover > .icon-wrapper .icon path { 41 stroke: black; 42} 43 44.paragraph { 45 color: black; 46 visibility: hidden; 47 opacity: 0; 48 font-size: 18px; 49 margin-right: 20px; 50 padding-left: 20px; 51 -webkit-transition: .2s linear; 52 transition: .2s linear; 53 font-weight: bold; 54 text-transform: uppercase; 55} 56 57.icon-wrapper { 58 width: 50px; 59 height: 50px; 60 position: absolute; 61 top: 0; 62 right: 0; 63 display: flex; 64 align-items: center; 65 justify-content: center; 66} 67 68.icon { 69 transform: scale(.9); 70 transition: .2s linear; 71} 72 73.icon path { 74 stroke: #000; 75 stroke-width: 2px; 76 -webkit-transition: .2s linear; 77 transition: .2s linear; 78}
boryanakrasteva
Boryana
MIT License