.elementor-81 .elementor-element.elementor-element-9687ce7{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-81 .elementor-element.elementor-element-f49cf40{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-81 .elementor-element.elementor-element-f49cf40.e-con{--align-self:center;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-81 .elementor-element.elementor-element-f8710b3.elementor-element{--align-self:center;}.elementor-81 .elementor-element.elementor-element-f8710b3 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-weight:600;-webkit-text-stroke-color:#000;stroke:#000;color:#000000;}.elementor-81 .elementor-element.elementor-element-e59985d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-81 .elementor-element.elementor-element-7d6a6a4{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-81 .elementor-element.elementor-element-17ba1425{--display:flex;}.elementor-81 .elementor-element.elementor-element-7907e2b{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-81 .elementor-element.elementor-element-dee972f{--display:flex;}.elementor-81 .elementor-element.elementor-element-6c2ea84 .elementor-heading-title{color:#000000;}.elementor-81 .elementor-element.elementor-element-db2b555{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-81 .elementor-element.elementor-element-52ab1e7{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}@media(min-width:768px){.elementor-81 .elementor-element.elementor-element-f49cf40{--width:50%;}.elementor-81 .elementor-element.elementor-element-e59985d{--width:50%;}}/* Start custom CSS for html, class: .elementor-element-9bc69bb */<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Magnetic Button</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background: #f0f0f0;
            font-family: Arial, sans-serif;
        }

        .button-container {
            position: relative;
            width: 200px;
            height: 60px;
            overflow: hidden;
        }

        .magnetic-button {
            position: absolute;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, #6a11cb, #2575fc);
            color: white;
            border: none;
            border-radius: 30px;
            font-size: 18px;
            font-weight: bold;
            text-align: center;
            line-height: 60px;
            transition: transform 0.2s ease-out;
            cursor: pointer;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="button-container">
        <a href="https://example.com" class="magnetic-button" target="_blank">Click Me!</a>
    </div>

    <script>
        const button = document.querySelector('.magnetic-button');
        const container = document.querySelector('.button-container');

        container.addEventListener('mousemove', (e) => {
            const rect = container.getBoundingClientRect();
            const x = e.clientX - rect.left - rect.width / 2;
            const y = e.clientY - rect.top - rect.height / 2;
            button.style.transform = `translate(${x * 0.3}px, ${y * 0.3}px)`;
        });

        container.addEventListener('mouseleave', () => {
            button.style.transform = `translate(0, 0)`;
        });
    </script>
</body>
</html>/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-5574daa */.awesome-3d-button {
    display: inline-block;
    padding: 15px 30px;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(145deg, #f05454, #d43838);
    border-radius: 12px;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4), -4px -4px 10px rgba(255, 255, 255, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

.awesome-3d-button:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2));
    z-index: -1;
}

.awesome-3d-button:hover {
    transform: translateY(-3px);
    box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.6), -6px -6px 12px rgba(255, 255, 255, 0.2);
}

.awesome-3d-button:active {
    transform: translateY(2px);
    box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.4), inset -4px -4px 8px rgba(255, 255, 255, 0.2);
}/* End custom CSS */