Button with mouse click component

Simulate a user clicking a button. You can customize the button with different colors, shapes, backgrounds, etc.

Demo:

advanced/051 component schema

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


Warning: substr() expects parameter 1 to be string, array given in /var/www/json2video.com/html/tpl/common.php on line 1096
{
    "type": "component",
    "component": "advanced/051",
    "settings": {
        "button": {},
        "cursor": {}
    }
}

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

Settings property for advanced/051

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
vertical-align
"center"
horizontal-align
"center"
padding
"1vw 2vw"
border-radius
"1.5vw"
text
"Button text"
text-align
"center"
color
"white"
font-size
"3vw"
font-family
"Roboto"

cursor object

Check all available object properties here.
Object property
Default value
width
"8vw"
height
"8vw"

Usage examples

Check the following examples of advanced/051:

Example 1


Warning: substr() expects parameter 1 to be string, array given in /var/www/json2video.com/html/tpl/common.php on line 1096
{
    "width": 640,
    "height": 360,
    "quality": "high",
    "draft": true,
    "scenes": [
        {
            "background-color": "#4392F1",
            "elements": [
                {
                    "type": "component",
                    "component": "advanced/051",
                    "settings": {
                        "button": {
                            "background": "red",
                            "border": "2px solid #b30000",
                            "border-radius": "0",
                            "padding": "0 15vw",
                            "text": "SUBSCRIBE",
                            "color": "white",
                            "text-shadow": "2px 2px 0px rgba(50,50,50,0.5)",
                            "font-size": "10vw",
                            "font-family": "Anton"
                        },
                        "cursor": {
                            "width": "10vw",
                            "height": "10vw"
                        }
                    },
                    "duration": 10
                }
            ]
        }
    ]
}

Example 2


Warning: substr() expects parameter 1 to be string, array given in /var/www/json2video.com/html/tpl/common.php on line 1096
{
    "width": 607,
    "height": 1080,
    "quality": "high",
    "draft": true,
    "scenes": [
        {
            "elements": [
                {
                    "type": "video",
                    "src": "https://assets.json2video.com/assets/videos/fashion-01.mp4",
                    "scale": {
                        "width": 607
                    }
                },
                {
                    "type": "component",
                    "component": "advanced/051",
                    "settings": {
                        "button": {
                            "background": "white",
                            "padding": "0 8vw",
                            "border-radius": "10vw",
                            "text": "BUY NOW",
                            "color": "#222",
                            "font-size": "10vw",
                            "font-family": "Anton"
                        },
                        "cursor": {
                            "width": "12vw",
                            "height": "12vw"
                        }
                    },
                    "start": 1,
                    "y": 540,
                    "height": 540
                }
            ]
        }
    ]
}