Animated Buy Tickets button

The Met (Metropolitan Museum of Art) uses an understated, high-fashion button interaction on its call-to-action triggers. Rather than shifting color abruptly, it employs a smooth background color wipe or fill transition, accompanied by a subtle horizontal arrow nudging right or an underline expanding beneath the text. Below is a complete, copy-paste implementation using pure HTML and CSS that pairs this luxury Met-style hover animation directly with your Eventbrite modal checkout button. Met-Style Animated Hover Button Code HTML Buy Tickets → How the Met Effect Works Pseudo-Element Expansion (::before): The gold background layer is set to transform: scaleX(0). On hover, it expands smoothly to scaleX(1). Dynamic Transform Origin: Setting transform-origin: right by default and changing to transform-origin: left on hover causes the gold fill to enter from the left and exit toward the right when the mouse leaves. Cubic-Bezier Easing: Using cubic-bezier(0.25, 1, 0.5, 1) mimics the springy, high-end motion design found on luxury agency and museum sites rather than linear CSS transitions. Arrow Slide (translateX): The right arrow moves 6px to the right when hovered, offering a subtle directional cue without disrupting layout alignment. Key Features of This Gutenberg Block Gutenberg Native Comments ( ): Prevents the block editor from sanitizing or stripping out the embedded CSS or JavaScript logic. Gold Sweep Hover Effect: Uses a high-fashion cubic-bezier(0.25, 1, 0.5, 1) easing curve so the gold background sweeps smoothly from left to right while the arrow glides right. Full Mobile Compatibility: Automatically expands to full container width on smaller screens for mobile tap targets. Built-in Eventbrite Widget Listener: Connects directly to event 1992515064194 and safely retries initialization if eb_widgets.js loads asynchronously. How the Animation Works Rotation Angle (rotate(-35deg)): Shifts the horizontal flat tickets upward into a diagonal angle on hover, recreating the transformation shown in your screenshots. Spring Timing (cubic-bezier(0.34, 1.56, 0.64, 1)): Gives the ticket icon a subtle, springy overshoot rather than a mechanical rotation. Seamless Integration: Retains the eventId: ‘1992515064194’ binding so clicking triggers the Eventbrite checkout modal. What Makes The Met’s Button Unique Exact Met Red Color: Background starts as bright Met Red (#e4002b). On hover, it darkens smoothly to #a1001f. Two Separate Staggered Tickets: Rather than one combined shape, the Met uses two separate overlapping ticket SVGs: Ticket 1 (Top / Back): Rotated slightly counter-clockwise (-22deg). Ticket 2 (Bottom / Front): Offset lower and rotated further (-28deg). The Motion on Hover: When hovered, the whole button darkens while the ticket pair rotates up diagonally into an angle (~-35deg to -40deg), shifting up and slightly scaling. Typography: Clean, bold Sans-Serif font (Helvetica Neue, Arial, or system-ui) with medium letter-spacing. Copy-Paste WordPress Gutenberg Custom HTML Block Copy and paste this into a Custom HTML block in WordPress: HTML 2 tickets rotate in opposite directions upon hovering, recreating the exact Met Museum animation dynamics shown in your screenshots. The Animation DynamicsResting State: The two ticket icons lie flat, stacked horizontally with a vertical offset. Hover State:The top/back ticket rotates counter-clockwise (upward to the left). The bottom/front ticket rotates clockwise or tilts into an opposing angle (downward to the right). The button background shifts from bright Met Red (#e4002b) to dark crimson (#9e001c). Copy-Paste WordPress Gutenberg Custom HTML BlockHTML To achieve that exact visual cutout effect where the top ticket overlaps the bottom ticket with a visible notch/outline—precisely as shown on metmuseum.org—the top ticket needs a background-colored stroke (or SVG mask) that matches the button’s background color (#e4002b changing to #9e001c on hover). PNG + 1 This creates the distinct separation and cutout lines where the two ticket paths intersect. Copy-Paste WordPress Gutenberg Custom HTML Block HTML Key Adjustment By adding stroke: #e4002b, stroke-width: 2.5px, and paint-order: stroke fill on the top ticket SVG element, a clean gap separates the two tickets in both the resting flat position and the fan-out hover rotation. When hovering, stroke: #9e001c seamlessly blends the cutout line with the darkened button background. Buy Tickets To capture attendee information locally on WordPress, store it in your database, pass it dynamically to the Eventbrite checkout, and finally redirect the data to a thank-you page, you can use a combination of HTML5 LocalStorage, a standard WordPress Form, and Eventbrite’s embedded checkout widget. The Eventbrite iframe allows you to autofill fields like First Name, Last Name, and Email natively using query parameters passed directly into the widget configuration. Step 1: Add the HTML Form and Checkout Container Add this custom HTML/JS code block to the WordPress page where you want users to register. This code displays a native form, saves the user’s data locally to the browser and database upon submission, and then loads the Eventbrite checkout with the data pre-filled. Replace 1992515064194 with your specific Event ID if it changes, and replace https://yourwebsite.com with your actual thank-you page URL. html Use code with caution. Step 2: Store Form Data in the WordPress Database To ensure that information is safely kept in your central database before the redirect takes place, add the following PHP code to your WordPress site. This creates a secure custom endpoint that logs the customer information into a custom WordPress database log table. Add this snippet to your active theme’s functions.php file: php // 1. Create a secure custom log database table when the theme initiates add_action(‘init’, ‘create_fashion_show_lead_table’); function create_fashion_show_lead_table() { global $wpdb; $table_name = $wpdb->prefix . ‘fashion_show_registrations’; $charset_collate = $wpdb->get_charset_collate(); if ($wpdb->get_var(“SHOW TABLES LIKE ‘$table_name'”) != $table_name) { $sql = “CREATE TABLE $table_name ( id mediumint(9) NOT NULL AUTO_INCREMENT, time datetime DEFAULT CURRENT_TIMESTAMP NOT NULL, first_name varchar(100) NOT NULL, last_name varchar(100) NOT NULL, email varchar(100) NOT NULL, phone varchar(50) NOT NULL, PRIMARY KEY (id) ) $charset_collate;”; require_once(ABSPATH . ‘wp-admin/includes/upgrade.php’); dbDelta($sql); } } // 2. Set up a secure custom WordPress REST API processing channel add_action(‘rest_api_init’, function () { register_rest_route(‘fashion-show/v1’, ‘/save-lead’, array( ‘methods’ => ‘POST’, ‘callback’ => ‘handle_fashion_show_lead_save’, ‘permission_callback’ => ‘__return_true’ )); }); function handle_fashion_show_lead_save(WP_REST_Request $request) { global $wpdb; $table_name = $wpdb->prefix . ‘fashion_show_registrations’; $first_name = sanitize_text_field($request->get_param(‘fname’)); $last_name = sanitize_text_field($request->get_param(‘lname’)); $email = sanitize_email($request->get_param(’email’)); $phone = sanitize_text_field($request->get_param(‘phone’)); if(empty($first_name) || empty($email)) { return new WP_Error(‘missing_fields’, ‘Required profile fields missing.’, array(‘status’ => 400)); } $inserted = $wpdb->insert( $table_name, array( ‘first_name’ => $first_name, ‘last_name’ => $last_name, ’email’ => $email, ‘phone’ => $phone ) ); if (!$inserted) { return new WP_REST_Response(array(‘status’ => ‘error’, ‘message’ => ‘Database save failure.’), 500); } return new WP_REST_Response(array(‘status’ => ‘success’), 200); } Use code with caution. ## Step 2: Implement Google Analytics 4 (GA4) Tracking To measure your conversions accurately, you need to track when a user submits your primary WordPress form vs. when they successfully purchase a ticket through the Eventbrite iframe. Replace the frontend JavaScript snippet provided in the previous response with this updated version. It fires GA4 custom data events exactly as actions happen on the page. If you’d like, let me know: * Do you need help finding your GA4 Measurement ID to link this tracking to your Google Analytics dashboard? * Should we add an email confirmation trigger directly from WordPress when the local database logs a lead?