Button by estefaniarizzo
This button was created for Button Mastery
#e8e8e8
1.custom-button { 2 padding: 10px 20px; 3 font-size: 18px; 4 font-weight: bold; 5 border: none; 6 border-radius: 10px; 7 background: linear-gradient(45deg, #4caf50, #ffc107, #2196f3); 8 color: #fff; 9 cursor: pointer; 10 transition: all 0.3s ease; 11 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 0 0 4px rgba(0, 0, 0, 0.1) inset; 12 position: relative; 13 overflow: hidden; 14 perspective: 1000px; 15 width: 200px; 16 height: 40px; 17} 18 19.custom-button:hover { 20 transform: translateY(-2px) rotateX(20deg) rotateY(10deg); 21 box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 0 0 4px rgba(0, 0, 0, 0.2) inset; 22 background: linear-gradient(45deg, #02ff0e, #fc0000, #ae00ff); 23} 24 25.custom-button:focus { 26 outline: none; 27} 28 29.custom-button:active { 30 transform: translateY(0) scale(1.1) rotate(45deg); 31 box-shadow: none; 32 animation: pulse 0.5s ease; 33} 34 35.custom-button::before { 36 content: ""; 37 position: absolute; 38 top: 4px; 39 left: 4px; 40 width: calc(100% - 8px); 41 height: calc(100% - 8px); 42 background: rgba(255, 255, 255, 0.2); 43 border-radius: 6px; 44 z-index: -1; 45} 46 47@keyframes pulse { 48 0% { 49 transform: scale(1); 50 } 51 50% { 52 transform: scale(1.1) rotate(120deg); 53 } 54 100% { 55 transform: scale(1); 56 } 57} 58 59.custom-button span { 60 position: absolute; 61 top: 50%; 62 left: 50%; 63 transform: translate(-50%, -50%); 64 transition: opacity 0.3s ease; 65 opacity: 1; /* El texto principal estará visible por defecto */ 66} 67
95 views
95 views
MIT License