Button by barisdogansutcu
#e8e8e8
1.content { 2 display: flex; 3 flex-direction: column; 4 justify-content: flex-start; 5 gap: 15px; 6 width: 300px; 7 height: 100px; 8 position: relative; 9 overflow: hidden; 10 border-radius: 14px; 11} 12.content::before { 13 content: ""; 14 position: absolute; 15 left: 0%; 16 top: 50%; 17 transform: translateY(-50%); 18 bottom: 0; 19 width: 40px; 20 height: 96px; 21 background-image: linear-gradient(90deg, #0000001c, transparent); 22 z-index: 2; 23 border-radius: 10px 0 0 10px; 24} 25.content::after { 26 content: ""; 27 position: absolute; 28 right: 0%; 29 top: 50%; 30 transform: translateY(-50%); 31 bottom: 0; 32 width: 40px; 33 height: 96px; 34 background-image: linear-gradient(-90deg, #0000001c, transparent); 35 z-index: 9; 36 border-radius: 0 10px 10px 0; 37} 38.basic-marquee { 39 display: flex; 40 align-items: center; 41 justify-content: center; 42 gap: 10px; 43 width: 100%; 44} 45.basic-marquee .button { 46 transition: all 0.3s ease; 47} 48.basic-marquee .button:hover { 49 transform: scale(1.1); 50 cursor: pointer; 51} 52.basic-marquee-1 { 53 animation: marquee 15s linear infinite; 54} 55.basic-marquee-2 { 56 animation: marquee 21s linear infinite; 57} 58.benefits { 59 display: flex; 60 flex-direction: column; 61 justify-content: center; 62 gap: 15px; 63 min-width: 900px; 64 height: 100%; 65 white-space: nowrap; 66 overflow: hidden; 67 position: absolute; 68 inset: 0; 69} 70@keyframes marquee { 71 0% { 72 transform: translateX(-10%); 73 } 74 100% { 75 transform: translateX(-50%); 76 } 77} 78 79.basic-marquee svg { 80 width: 40px; 81} 82.basic-marquee button { 83 background-color: transparent; 84 border: none; 85 padding: 0; 86 margin: 0; 87 display: flex; 88 align-items: center; 89 justify-content: center; 90} 91.cls-1 { 92 fill: #1ab7ea; 93} 94 95.cls-1, 96.cls-2 { 97 fill-rule: evenodd; 98} 99 100.cls-2 { 101 fill: #fff; 102} 103 104.cls-3 { 105 fill: #ee8208; 106 fill-rule: evenodd; 107} 108 109.cls-4 { 110 fill: #fff; 111} 112 113.cls-5, 114.cls-6 { 115 fill-rule: evenodd; 116} 117 118.cls-5 { 119 fill: #48dd55; 120} 121 122.cls-6 { 123 fill: #fff; 124} 125 126.cls-7 { 127 fill: #0a66c2; 128} 129 130.cls-7, 131.cls-8 { 132 fill-rule: evenodd; 133} 134 135.cls-8 { 136 fill: #fff; 137} 138 139.cls-9 { 140 fill: #10b7f4; 141} 142 143.cls-9, 144.cls-10 { 145 fill-rule: evenodd; 146} 147 148.cls-10 { 149 fill: #fff; 150} 151 152.cls-11 { 153 fill: #1da1f2; 154} 155 156.cls-11, 157.cls-12 { 158 fill-rule: evenodd; 159} 160 161.cls-12 { 162 fill: #fff; 163} 164 165.cls-13 { 166 fill: #ea4c89; 167} 168 169.cls-13, 170.cls-14 { 171 fill-rule: evenodd; 172} 173 174.cls-14 { 175 fill: #fff; 176} 177 178.cls-15 { 179 fill: #1769ff; 180} 181 182.cls-15, 183.cls-16 { 184 fill-rule: evenodd; 185} 186 187.cls-16 { 188 fill: #fff; 189} 190 191.cls-17 { 192 fill: #f26522; 193} 194 195.cls-17, 196.cls-18 { 197 fill-rule: evenodd; 198} 199 200.cls-18 { 201 fill: #fff; 202} 203
1K views
1K views
Variations
1 MIT License