Animated button component

Include buttons in your videos to motivate users to click

Demo:

advanced/050 component schema

This is a simplified schema of a advanced/050 component element:

{
    "type": "component",
    "component": "advanced/050",
    "settings": {
        "button": {}
    }
}

Check the full specification of the Component schema in the API documentation.

Settings property for advanced/050

This component accepts the following object items in the settings property:

button object

Defines the button properties

Check all available object properties here.
Object property
Default value
text
"Button text"
vertical-align
"center"
horizontal-align
"center"
background
""
text-align
"center"
color
"white"
font-family
"Roboto"

Usage examples

Check the following examples of advanced/050:

Example 1

{
    "width": 640,
    "height": 320,
    "quality": "high",
    "draft": true,
    "scenes": [
        {
            "background-color": "#FAF3DD",
            "elements": [
                {
                    "type": "component",
                    "component": "advanced/050",
                    "settings": {
                        "button": {
                            "background": "#E3170A",
                            "border": "0.2vw solid rgba(0,0,0,20%)",
                            "border-radius": "3vw",
                            "padding": "0 15vw",
                            "box-shadow": "inset -1vw -1vw 1vw rgba(0,0,0,0.2)",
                            "text": "Subscribe!",
                            "text-shadow": ".3vw .3vw rgba(0,0,0,0.4)",
                            "font-size": "10vw",
                            "font-family": "Anton"
                        }
                    },
                    "duration": 10
                }
            ]
        }
    ]
}

Example 2

{
    "width": 640,
    "height": 320,
    "quality": "high",
    "draft": true,
    "scenes": [
        {
            "background-color": "#FFFFFF",
            "elements": [
                {
                    "type": "component",
                    "component": "advanced/050",
                    "settings": {
                        "button": {
                            "background": "black",
                            "padding": "0 15vw",
                            "box-shadow": "2vw 2vw 0 limegreen",
                            "text": "NEXT »",
                            "font-size": "10vw",
                            "font-family": "Anton"
                        }
                    },
                    "duration": 10
                }
            ]
        }
    ]
}