Buttons (`buttons`)¶

← Back to Object Elements | 📋 All Elements

This element is available in the Lucit Template Designer Elements Panel and can be added to any template by clicking on it.

When this element is added, the code listed in Element HTML will be added as a new layer in your template design that you can then customize as you see fit.

Overview

Type: object
Element Class: App\LuCore\DriveTemplates\BackgroundDriveTemplateElementClass

repeating, red, gray, circle,

Preview

Element HTML

<div x-objectcode="buttons" class="lc_ut_designer lc_dt_element lc_dt_object lc_dt_image_full_size_stretch" id="{id}" title="Buttons"></div>

Default CSS

--u:  2vmax;
    --c1: #f13c3c;
    --c2: #c72f2f;
    --c3: #607d8b;
    --c4: #43687a;
    --bg: #460000;
    --circle1: var(--c3) 0% 15%, var(--c4) 16% 20%, var(--c3) 21% 21%, #fff0 22% 100%;
    --circle2: var(--c1) 0% 11%, var(--c2) 12% 16%, var(--c1) 16.5% 17%, #fff0 17.5% 100%;              
    --circle3: var(--c3) 0% 4%, var(--c4) 5% 8%, var(--c3) 8.5% 9.25%, #fff0 9.75% 100%;
  --circle4: var(--c1) 0% 4%, var(--c2) 5% 8%, var(--c1) 8.5% 9.25%, #fff0 9.75% 100%;
    --black-dot: var(--bg) 0% calc(var(--u) * 0.2), #0002 calc(var(--u) * 0.3) calc(var(--u) * 0.45), #fff0 4% 100%;
    --black-dot-small: var(--bg) 0% calc(var(--u) * 0.05), #0002 calc(var(--u) * 0.1) calc(var(--u) * 0.15), #fff0 2% 100%;
    --gp: 50%/calc(var(--u) * 10) calc(var(--u) * 10);
  background: 
        /* mini holes */    
        radial-gradient(circle at 73.5% 23.5%, var(--black-dot-small)) var(--gp),
        radial-gradient(circle at 76.5% 23.5%, var(--black-dot-small)) var(--gp),
        radial-gradient(circle at 73.5% 26.5%, var(--black-dot-small)) var(--gp),
        radial-gradient(circle at 76.5% 26.5%, var(--black-dot-small)) var(--gp),  
        radial-gradient(circle at 23.5% 73.5%, var(--black-dot-small)) var(--gp),
        radial-gradient(circle at 26.5% 73.5%, var(--black-dot-small)) var(--gp),
        radial-gradient(circle at 23.5% 76.5%, var(--black-dot-small)) var(--gp),
        radial-gradient(circle at 26.5% 76.5%, var(--black-dot-small)) var(--gp),
        radial-gradient(circle at 73.5% 73.5%, var(--black-dot-small)) var(--gp),
        radial-gradient(circle at 76.5% 73.5%, var(--black-dot-small)) var(--gp),
        radial-gradient(circle at 73.5% 76.5%, var(--black-dot-small)) var(--gp),
        radial-gradient(circle at 76.5% 76.5%, var(--black-dot-small)) var(--gp),  
        radial-gradient(circle at 23.5% 23.5%, var(--black-dot-small)) var(--gp),
        radial-gradient(circle at 26.5% 23.5%, var(--black-dot-small)) var(--gp),
        radial-gradient(circle at 23.5% 26.5%, var(--black-dot-small)) var(--gp),
        radial-gradient(circle at 26.5% 26.5%, var(--black-dot-small)) var(--gp),   
        /* mini holes */

        /* mini buttons */
        radial-gradient(circle at 25% 25%, var(--circle3)) var(--gp),
        radial-gradient(circle at 25% 75%, var(--circle4)) var(--gp),
        radial-gradient(circle at 75% 25%, var(--circle4)) var(--gp),
        radial-gradient(circle at 75% 75%, var(--circle3)) var(--gp),
        /* mini buttons */

        /* blue holes */
        radial-gradient(circle at 4.5% 45.5%, var(--black-dot)) var(--gp),  
        radial-gradient(circle at 4.5% 54.5%, var(--black-dot)) var(--gp),  
        radial-gradient(circle at 95.5% 45.5%, var(--black-dot)) var(--gp), 
        radial-gradient(circle at 95.5% 54.5%, var(--black-dot)) var(--gp), 
        radial-gradient(circle at 50% 93.5%, var(--black-dot)) var(--gp),   
        radial-gradient(circle at 50% 6.5%, var(--black-dot)) var(--gp),    
        radial-gradient(circle at 56.5% 0%, var(--black-dot)) var(--gp),
        radial-gradient(circle at 56.5% 100%, var(--black-dot)) var(--gp),
        radial-gradient(circle at 43.5% 0%, var(--black-dot)) var(--gp),
        radial-gradient(circle at 43.5% 100%, var(--black-dot)) var(--gp),
        /* blue holes */

        /* red holes */
        radial-gradient(circle at 5% 95%, var(--black-dot)) var(--gp),
        radial-gradient(circle at 95% 5%, var(--black-dot)) var(--gp),
        radial-gradient(circle at 95% 95%, var(--black-dot)) var(--gp),
        radial-gradient(circle at 5% 5%, var(--black-dot)) var(--gp),
        radial-gradient(circle at 50% 56.5%, var(--black-dot)) var(--gp),
        radial-gradient(circle at 43.5% 50%, var(--black-dot)) var(--gp),
        radial-gradient(circle at 50% 43.5%, var(--black-dot)) var(--gp),
        radial-gradient(circle at 56.5% 50%, var(--black-dot)) var(--gp),
        /* red holes */

        /* blue buttons */
        radial-gradient(circle at 50% 0%, var(--circle1)) var(--gp),
        radial-gradient(circle at 50% 100%, var(--circle1)) var(--gp),
        radial-gradient(circle at 0% 50%, var(--circle1)) var(--gp),
        radial-gradient(circle at 100% 50%, var(--circle1)) var(--gp),
        /* blue buttons */

        /* red buttons */
        radial-gradient(circle at 0% 100%, var(--circle2)) var(--gp),
        radial-gradient(circle at 0% 0%, var(--circle2)) var(--gp),
        radial-gradient(circle at 100% 100%, var(--circle2)) var(--gp),
        radial-gradient(circle at 100% 0%, var(--circle2)) var(--gp),
        radial-gradient(circle at 50% 50%, var(--c1) 0% 23%, var(--c2) 24% 32%, var(--c1) 33% 34%, #fff0 35% 100%) var(--gp),
        /* red buttons */

        var(--bg);

← Back to Object Elements | 📋 All Elements

Buttons (buttons)¶

Buttons (`buttons`)¶