Button by seyed-mohsen-mousavi
#e8e8e8
1.button { 2 cursor: pointer; 3 padding: 10px; 4 border: outset; 5 width: 100px; 6 height: 40px; 7 transition: ease-in-out 0.3s; 8} 9 10.button:hover { 11 padding: 10px; 12 width: 105px; 13 height: 45px; 14 background-color: #3e3e3e; 15 font-size: 13px; 16 font-weight: bold; 17 color: white; 18 -webkit-animation: shadow-pop-tr 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) both; 19 animation: shadow-pop-tr 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) both; 20} 21 22@-webkit-keyframes shadow-pop-tr { 23 0% { 24 -webkit-box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 25 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e; 26 box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 27 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e; 28 -webkit-transform: translateX(0) translateY(0); 29 transform: translateX(0) translateY(0); 30 } 31 100% { 32 -webkit-box-shadow: 1px -1px #3e3e3e, 2px -2px #3e3e3e, 3px -3px #3e3e3e, 33 4px -4px #3e3e3e, 5px -5px #3e3e3e, 6px -6px #3e3e3e, 7px -7px #3e3e3e, 34 8px -8px #3e3e3e; 35 box-shadow: 1px -1px #3e3e3e, 2px -2px #3e3e3e, 3px -3px #3e3e3e, 36 4px -4px #3e3e3e, 5px -5px #3e3e3e, 6px -6px #3e3e3e, 7px -7px #3e3e3e, 37 8px -8px #3e3e3e; 38 -webkit-transform: translateX(-8px) translateY(8px); 39 transform: translateX(-8px) translateY(8px); 40 } 41} 42@keyframes shadow-pop-tr { 43 0% { 44 -webkit-box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 45 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e; 46 box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 47 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e; 48 -webkit-transform: translateX(0) translateY(0); 49 transform: translateX(0) translateY(0); 50 } 51 100% { 52 -webkit-box-shadow: 1px -1px #3e3e3e, 2px -2px #3e3e3e, 3px -3px #3e3e3e, 53 4px -4px #3e3e3e, 5px -5px #3e3e3e, 6px -6px #3e3e3e, 7px -7px #3e3e3e, 54 8px -8px #3e3e3e; 55 box-shadow: 1px -1px #3e3e3e, 2px -2px #3e3e3e, 3px -3px #3e3e3e, 56 4px -4px #3e3e3e, 5px -5px #3e3e3e, 6px -6px #3e3e3e, 7px -7px #3e3e3e, 57 8px -8px #3e3e3e; 58 -webkit-transform: translateX(-8px) translateY(8px); 59 transform: translateX(-8px) translateY(8px); 60 } 61} 62
247 views
247 views
MIT License