CSSAdd prefixes
1button { 2 all: unset; 3 background-color: #1b2164; 4 color: #fff; 5 border-radius: 8px; 6 padding: 1rem; 7 overflow: hidden; 8 display: -webkit-box; 9 display: -ms-flexbox; 10 display: flex; 11 -webkit-box-align: center; 12 -ms-flex-align: center; 13 align-items: center; 14} 15 16button span { 17 letter-spacing: 1.2px; 18 padding-left: 0.8rem; 19 padding-right: 0.6rem; 20 font-weight: 600; 21} 22 23button:hover { 24 background: linear-gradient(-45deg, #1b2164, #6a33a8, #1b2164, #2ba6f5); 25 background-size: 400% 400%; 26 -webkit-transform: scale(1.01); 27 -ms-transform: scale(1.01); 28 transform: scale(1.01); 29 -webkit-animation: scaling-and-gradient 10s ease infinite; 30 animation: scaling-and-gradient 10s ease infinite; 31} 32 33button svg { 34 text-shadow: 0px 7px rgba(81,67,21,0.8), 35 -3px 0px 7px rgba(81,67,21,0.8), 36 0px 4px 7px rgba(81,67,21,0.8); 37 -webkit-animation: slide-in 1.6s ease-out both; 38 animation: slide-in 1.6s ease-out both; 39} 40 41button:active svg { 42 -webkit-animation: slide-out 0.4s ease-in forwards; 43 animation: slide-out 0.4s ease-in forwards; 44} 45 46@-webkit-keyframes slide-out { 47 0% { 48 -webkit-transform: translateY(0) translateX(0) rotate(-35); 49 transform: translateY(0) translateX(0) rotate(-35); 50 opacity: 1; 51 } 52 53 100% { 54 -webkit-transform: translateY(-300px) translateX(-300px); 55 transform: translateY(-300px) translateX(-300px); 56 opacity: 0; 57 } 58} 59 60@keyframes slide-out { 61 0% { 62 -webkit-transform: translateY(0) translateX(0) rotate(-35); 63 transform: translateY(0) translateX(0) rotate(-35); 64 opacity: 1; 65 } 66 67 100% { 68 -webkit-transform: translateY(-300px) translateX(-300px); 69 transform: translateY(-300px) translateX(-300px); 70 opacity: 0; 71 } 72} 73 74@-webkit-keyframes slide-in { 75 0% { 76 -webkit-transform: translateY(300px) translateX(300px); 77 transform: translateY(300px) translateX(300px); 78 opacity: 0; 79 } 80 81 100% { 82 -webkit-transform: translateY(0) translateX(0) rotate(-35); 83 transform: translateY(0) translateX(0) rotate(-35); 84 opacity: 1; 85 } 86} 87 88@keyframes slide-in { 89 0% { 90 -webkit-transform: translateY(300px) translateX(300px); 91 transform: translateY(300px) translateX(300px); 92 opacity: 0; 93 } 94 95 100% { 96 -webkit-transform: translateY(0) translateX(0) rotate(-35); 97 transform: translateY(0) translateX(0) rotate(-35); 98 opacity: 1; 99 } 100} 101 102@-webkit-keyframes scaling-and-gradient { 103 0% { 104 background-position: 0% 50%; 105 scale: 1; 106 } 107 108 25% { 109 scale: 1.04; 110 } 111 112 50% { 113 background-position: 100% 50%; 114 scale: 1.06; 115 } 116 117 50% { 118 scale: 1.04; 119 } 120 121 100% { 122 background-position: 0% 50%; 123 scale: 1; 124 } 125} 126 127@keyframes scaling-and-gradient { 128 0% { 129 background-position: 0% 50%; 130 scale: 1; 131 } 132 133 25% { 134 scale: 1.04; 135 } 136 137 50% { 138 background-position: 100% 50%; 139 scale: 1.06; 140 } 141 142 50% { 143 scale: 1.04; 144 } 145 146 100% { 147 background-position: 0% 50%; 148 scale: 1; 149 } 150}
HTML
1<button> 2 <svg version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" viewBox="0 0 512 512" xml:space="preserve" fill="#c673d9" transform="rotate(-35)"> 3 <g id="SVGRepo_bgCarrier" stroke-width="0"></g> 4 <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g> 5 <g id="SVGRepo_iconCarrier"> 6 7 <g> 8 <polygon class="st0" points="154.219,205.188 166.219,335.031 110.922,405.563 96.406,296.563"></polygon> 9 <polygon class="st0" points="357.781,205.188 345.766,335.031 401.063,405.563 415.594,296.563"></polygon> 10 <path class="st0" d="M323.813,62.219C305.125,23.328,275.656,0,256,0s-49.125,23.344-67.813,62.219H323.813z"></path> 11 <path class="st0" d="M331.328,80.469H180.672c-6.641,19.156-10.594,41.094-10.047,65.188 c1.609,69.063,18.047,190.984,18.047,190.984l122.641-0.016l12,0.016c0,0,16.453-121.938,18.031-190.984 C341.922,121.563,337.969,99.609,331.328,80.469z M256,231.031c-23.578,0-42.688-19.094-42.688-42.672s19.125-42.672,42.688-42.672 s42.672,19.094,42.656,42.672C298.672,211.938,279.563,231.031,256,231.031z"></path> 12 <path class="st0" d="M429.516,512c-6.109-17.594-22.859-30.219-42.531-30.219c-6.297,0-12.297,1.281-17.766,3.625 c-1.875-20.578-19.188-36.688-40.25-36.688c-3.047,0-6,0.328-8.844,0.969c0.031-0.563,0.031-1.125,0.031-1.688 c0-15.531-12.594-28.125-28.125-28.125c-4.031,0-7.875,0.844-11.344,2.375c-9.734-17.219-12.563-62.156-12.563-62.156h-25.5 c0,0-3.266,49.344-14.813,65.688c-2.688-1.094-5.656-1.688-8.75-1.688c-13.016,0-23.563,10.547-23.563,23.563 c0,0.984,0.063,1.953,0.188,2.906c-3.719-1.203-3.281-1.844-7.406-1.844c-16.484,0-30.531,10.406-35.938,25 c-6.047-2.516-12.672-3.906-19.625-3.906c-25.156,0-46.063,18.219-50.234,42.188H429.516z"></path> 13 </g> 14 </g> 15 </svg> 16 <span>aim for the stars!</span> 17</button>
