Button by Wlidha09
#212121
1.btn-white { 2 display: inline-flex; 3 align-items: center; 4 color: #fff; 5 border: 1px solid #fff; 6 min-height: 50px; 7 padding: 0 20px; 8 font-size: 17px; 9 text-transform: uppercase; 10 z-index: 1; 11 position: relative; 12 background-color: transparent; 13} 14 15.btn-white::before { 16 content: ""; 17 background-color: #fff; 18 display: block; 19 width: 45px; 20 height: 1px; 21 margin-right: 20px; 22} 23 24.btn-white::after { 25 content: ""; 26 background-color: #fff; 27 display: block; 28 width: 0%; 29 height: 100%; 30 right: 0; 31 top: 0; 32 position: absolute; 33 z-index: -1; 34 -webkit-transition: all 0.3s ease-out; 35 -moz-transition: all 0.3s ease-out; 36 -o-transition: all 0.3s ease-out; 37 transition: all 0.3s ease-out; 38} 39 40.btn-white:hover { 41 color: #232963; 42 text-decoration: none; 43 -webkit-transition: all 0.3s ease-out; 44 -moz-transition: all 0.3s ease-out; 45 -o-transition: all 0.3s ease-out; 46 transition: all 0.3s ease-out; 47} 48 49.btn-white:hover::after { 50 width: 100%; 51 -webkit-transition: all 0.3s ease-out; 52 -moz-transition: all 0.3s ease-out; 53 -o-transition: all 0.3s ease-out; 54 transition: all 0.3s ease-out; 55} 56 57.btn-white:hover::before { 58 background-color: #232963; 59 -webkit-transition: all 0.3s ease-out; 60 -moz-transition: all 0.3s ease-out; 61 -o-transition: all 0.3s ease-out; 62 transition: all 0.3s ease-out; 63}
769 views
769 views
MIT License