#e8e8e8
1/*bg*/ 2/*txt*/ 3/*success*/ 4.buttons { 5 display: flex; 6 justify-content: space-around; 7 top: 20px; 8 left: 20px; 9} 10 11.buttons button { 12 width: 150px; 13 height: 50px; 14 background-color: white; 15 margin: 20px; 16 color: #568fa6; 17 position: relative; 18 overflow: hidden; 19 font-size: 14px; 20 letter-spacing: 1px; 21 font-weight: 500; 22 text-transform: uppercase; 23 transition: all 0.3s ease; 24 cursor: pointer; 25 border: 0; 26 display: flex; 27 align-items: center; 28 justify-content: center; 29 border-radius: 3px; 30} 31 32.buttons button:before, .buttons button:after { 33 content: ""; 34 position: absolute; 35 width: 0; 36 height: 2px; 37 background-color: #44d8a4; 38 transition: all 0.3s cubic-bezier(0.35, 0.1, 0.25, 1); 39} 40 41.buttons button:before { 42 right: 0; 43 top: 0; 44 transition: all 0.5s cubic-bezier(0.35, 0.1, 0.25, 1); 45} 46 47.buttons button:after { 48 left: 0; 49 bottom: 0; 50} 51 52.buttons button span { 53 width: 100%; 54 height: 100%; 55 position: absolute; 56 left: 0; 57 top: 0; 58 margin: 0; 59 padding: 0; 60 z-index: 1; 61} 62 63.buttons button span:before, .buttons button span:after { 64 content: ""; 65 position: absolute; 66 width: 2px; 67 height: 0; 68 background-color: #44d8a4; 69 transition: all 0.3s cubic-bezier(0.35, 0.1, 0.25, 1); 70} 71 72.buttons button span:before { 73 right: 0; 74 top: 0; 75 transition: all 0.5s cubic-bezier(0.35, 0.1, 0.25, 1); 76} 77 78.buttons button span:after { 79 left: 0; 80 bottom: 0; 81} 82 83.buttons button p { 84 padding: 0; 85 margin: 0; 86 transition: all 0.4s cubic-bezier(0.35, 0.1, 0.25, 1); 87 position: absolute; 88 width: 100%; 89 height: 100%; 90} 91 92.buttons button p:before, .buttons button p:after { 93 position: absolute; 94 width: 100%; 95 transition: all 0.4s cubic-bezier(0.35, 0.1, 0.25, 1); 96 z-index: 1; 97 left: 0; 98} 99 100.buttons button p:before { 101 content: attr(data-title); 102 top: 50%; 103 transform: translateY(-50%); 104} 105 106.buttons button p:after { 107 content: attr(data-text); 108 top: 150%; 109 color: #44d8a4; 110} 111 112.buttons button:hover:before, .buttons button:hover:after { 113 width: 100%; 114} 115 116.buttons button:hover span { 117 z-index: 1; 118} 119 120.buttons button:hover span:before, .buttons button:hover span:after { 121 height: 100%; 122} 123 124.buttons button:hover p:before { 125 top: -50%; 126 transform: rotate(5deg); 127} 128 129.buttons button:hover p:after { 130 top: 50%; 131 transform: translateY(-50%); 132} 133 134.buttons button.start { 135 background-color: #44d8a4; 136 box-shadow: 0px 5px 10px -10px rgba(0, 0, 0, 0.2); 137 transition: all 0.2s ease; 138} 139 140.buttons button.start p:before { 141 top: -50%; 142 transform: rotate(5deg); 143} 144 145.buttons button.start p:after { 146 color: white; 147 transition: all 0s ease; 148 content: attr(data-start); 149 top: 50%; 150 transform: translateY(-50%); 151 animation: start 0.3s ease; 152 animation-fill-mode: forwards; 153} 154 155@keyframes start { 156 from { 157 top: -50%; 158 } 159} 160 161.buttons button.start:hover:before, .buttons button.start:hover:after { 162 display: none; 163} 164 165.buttons button.start:hover span { 166 display: none; 167} 168 169.buttons button:active { 170 outline: none; 171 border: none; 172} 173 174.buttons button:focus { 175 outline: 0; 176}
7.4K views
7.4K views
Comments
MIT License