button_text button_text
/* Reset and base styles */ * { margin: 0; padding: 0; box-sizing: border-box; /* font-family: "Stolzl-Medium"; */ /* src: url("Stolzl-Medium.woff2") format("woff2"); */ /* font-weight: normal; */ /* font-style: normal; */ } body { font-family: "BR Sonoma", sans-serif; background-color: #f5f5f5; padding: 50px; } /* Controls styling */ .controls { max-width: 600px; margin: 0 auto 40px auto; background: white; padding: 30px; border-radius: 15px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); } .control-group { margin-bottom: 25px; } .control-group:last-child { margin-bottom: 0; } .control-group label { display: block; margin-bottom: 8px; font-weight: 600; color: #333; } .control-group input[type="text"] { width: 100%; padding: 12px 16px; border: 2px solid #e1e5e9; border-radius: 8px; font-size: 16px; font-family: "BR Sonoma", sans-serif; transition: border-color 0.3s ease; } .control-group input[type="text"]:focus { outline: none; border-color: #ac55b2; } .radio-group { display: flex; gap: 20px; } .radio-group label { display: flex; align-items: center; gap: 8px; margin-bottom: 0; font-weight: 500; cursor: pointer; } .radio-group input[type="radio"] { margin: 0; } .button-container { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; justify-content: center; } /* Primary Gradient Button Styles - LARGER SIZE */ .gradient-button { /* Base button properties */ position: relative; padding: 18px 36px; /* Increased from 12px 24px */ border: 3px solid transparent; /* Increased from 2px */ border-radius: 40px; /* Increased from 30px to make corners rounder */ font-size: 20px; /* Increased from 16px */ font-family: "BR Sonoma", sans-serif; font-weight: 500; cursor: pointer; transition: all 0.3s ease; outline: none; text-decoration: none; display: inline-block; /* Text styling for normal state */ color: #333; background: #f5f5f5; /* Create gradient border using background-image */ background-image: linear-gradient(#f5f5f5, #f5f5f5), linear-gradient(160deg, #fa766f, #fa9565, #d17491, #ac55b2, #754de9, #50b3f5); background-origin: border-box; background-clip: padding-box, border-box; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.2); } /* Hover state */ .gradient-button:hover { color: white; background: linear-gradient(160deg, #fa766f, #fa9565, #d17491, #ac55b2, #754de9, #50b3f5); background-clip: padding-box; transform: translateY(-2px); /* Increased from -1px */ /* Box-shadow removed for smooth gradient border on hover */ } /* Active state */ .gradient-button:active { transform: translateY(0); box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2); /* Increased shadow */ } /* Focus state for accessibility */ .gradient-button:focus { box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.3); /* Increased from 3px */ } /* Secondary Button Styles - LARGER SIZE */ .secondary-button { padding: 18px 36px; /* Increased from 12px 24px */ border: 3px solid #000; /* Increased from 2px */ border-radius: 40px; /* Increased from 30px to make corners rounder */ background-color: white; color: black; font-size: 20px; /* Increased from 16px */ font-weight: 500; cursor: pointer; transition: all 0.3s ease; text-decoration: none; display: inline-block; } .secondary-button:hover { background-color: black; color: white; transform: translateY(-2px); /* Increased from -1px */ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); /* Added shadow */ } .secondary-button:active { transform: translateY(0); box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2); } .secondary-button:focus { box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.3); }