Button by vinodjangid07
#212121
1.Btn { 2 width: 140px; 3 height: 40px; 4 border: none; 5 border-radius: 10px; 6 background: linear-gradient(to right,#77530a,#ffd277,#77530a,#77530a,#ffd277,#77530a); 7 background-size: 250%; 8 background-position: left; 9 color: #ffd277; 10 position: relative; 11 display: flex; 12 align-items: center; 13 justify-content: center; 14 cursor: pointer; 15 transition-duration: 1s; 16 overflow: hidden; 17} 18 19.Btn::before { 20 position: absolute; 21 content: "SUBSCRIBE"; 22 color: #ffd277; 23 display: flex; 24 align-items: center; 25 justify-content: center; 26 width: 97%; 27 height: 90%; 28 border-radius: 8px; 29 transition-duration: 1s; 30 background-color: rgba(0, 0, 0, 0.842); 31 background-size: 200%; 32} 33 34.Btn:hover { 35 background-position: right; 36 transition-duration: 1s; 37} 38 39.Btn:hover::before { 40 background-position: right; 41 transition-duration: 1s; 42} 43 44.Btn:active { 45 transform: scale(0.95); 46}
8.6K views
8.6K views
MIT License