Button by Wlidha09
#212121
1.btn-slice { 2 background-color: transparent; 3 padding: 1.2rem 2.5rem; 4 border: 2px solid #ffffff; 5 border-radius: 0rem; 6 color: #ffffff; 7 font-size: 0.6875rem; 8 font-weight: 700; 9 letter-spacing: 0.3rem; 10 position: relative; 11 -moz-transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225); 12 -o-transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225); 13 transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225); 14 /* custom */ 15 -moz-transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225); 16 -o-transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225); 17 transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225); 18 /* custom */ 19} 20 21.btn-slice .top { 22 position: relative; 23 height: 6px; 24 overflow: hidden; 25 top: 0; 26 -moz-transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040); 27 -o-transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040); 28 transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040); 29 /* custom */ 30 -moz-transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040); 31 -o-transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040); 32 transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040); 33 /* custom */ 34 -webkit-transition-delay: 0.35s; 35 -moz-transition-delay: 0.35s; 36 -ms-transition-delay: 0.35s; 37 -o-transition-delay: 0.35s; 38 transition-delay: 0.35s; 39} 40 41.btn-slice .bottom { 42 position: relative; 43 height: 6px; 44 overflow: hidden; 45 bottom: 0; 46 -moz-transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040); 47 -o-transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040); 48 transition: all 300ms cubic-bezier(1.000, -0.055, 0.025, 1.040); 49 /* custom */ 50 -moz-transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040); 51 -o-transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040); 52 transition-timing-function: cubic-bezier(1.000, -0.055, 0.025, 1.040); 53 /* custom */ 54 -webkit-transition-delay: 0.35s; 55 -moz-transition-delay: 0.35s; 56 -ms-transition-delay: 0.35s; 57 -o-transition-delay: 0.35s; 58 transition-delay: 0.35s; 59} 60 61.btn-slice .bottom span { 62 top: -6px; 63 position: absolute; 64 left: 0; 65} 66 67.btn-slice:hover .top { 68 top: -5px; 69 -webkit-transition-delay: 0.35s; 70 -moz-transition-delay: 0.35s; 71 -ms-transition-delay: 0.35s; 72 -o-transition-delay: 0.35s; 73 transition-delay: 0.35s; 74} 75 76.btn-slice:hover .bottom { 77 bottom: -5px; 78 -webkit-transition-delay: 0.35s; 79 -moz-transition-delay: 0.35s; 80 -ms-transition-delay: 0.35s; 81 -o-transition-delay: 0.35s; 82 transition-delay: 0.35s; 83} 84 85.btn-slice:hover, .btn-slice:focus, .btn-slice:active { 86 margin-left: 10px; 87} 88 89.btn-slice:before { 90 content: ''; 91 height: 1px; 92 width: 60px; 93 background-color: #ffffff; 94 position: absolute; 95 margin-top: 6px; 96 right: -35px; 97 -moz-transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225); 98 -o-transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225); 99 transition: all 1000ms cubic-bezier(0.890, -0.170, 0.140, 1.225); 100 /* custom */ 101 -moz-transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225); 102 -o-transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225); 103 transition-timing-function: cubic-bezier(0.890, -0.170, 0.140, 1.225); 104 /* custom */ 105} 106 107.btn-slice:hover:before { 108 width: 130%; 109}
731 views
731 views
MIT License