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:

{
    "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:

{
    "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
                }
            ]
        }
    ]
}

require 'vendor/autoload.php';

use JSON2Video\Movie;
use JSON2Video\Scene;

// Create and initialize the movie object
$movie = new Movie;
$movie->setAPIKey(YOUR_API_KEY);
$movie->width = 640;
$movie->height = 360;
$movie->quality = 'high';
$movie->draft = true;

// Create the scenes of the movie

// Create SCENE 1
$scene1 = new Scene;
$scene1->background-color = '#4392F1';
$scene1->addElement([
'component',
'advanced/051',
	[
		[
'red',
'2px solid #b30000',
'0',
'0 15vw',
'SUBSCRIBE',
'white',
'2px 2px 0px rgba(50,50,50,0.5)',
'10vw',
'Anton'
		],
		[
'10vw',
'10vw'
		]
	],
10
]);
$movie->addScene($scene1);

// Finally, render the movie
$movie->render();

// Wait for the movie to be rendered
$movie->waitToFinish();

let movie = new Movie;
movie.setAPIKey(YOUR_API_KEY);
movie.set("width", 640);
movie.set("height", 360);
movie.set("quality", "high");
movie.set("draft", true);

// Create the scenes of the movie

// Create SCENE 1
let scene1 = new Scene;
scene1.set("background-color", "#4392F1");
scene1.addElement([
"component",
"advanced/051",
	[
		[
"red",
"2px solid #b30000",
"0",
"0 15vw",
"SUBSCRIBE",
"white",
"2px 2px 0px rgba(50,50,50,0.5)",
"10vw",
"Anton"
		],
		[
"10vw",
"10vw"
		]
	],
10
]);
movie.addScene(scene1);

// Finally, render the movie
movie.render();

// Wait for the movie to be rendered
movie.waitToFinish();

Example 2

JSON
PHP
NodeJS

{
    "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
                }
            ]
        }
    ]
}

require 'vendor/autoload.php';

use JSON2Video\Movie;
use JSON2Video\Scene;

// Create and initialize the movie object
$movie = new Movie;
$movie->setAPIKey(YOUR_API_KEY);
$movie->width = 607;
$movie->height = 1080;
$movie->quality = 'high';
$movie->draft = true;

// Create the scenes of the movie

// Create SCENE 1
$scene1 = new Scene;
$scene1->addElement([
'video',
'https://assets.json2video.com/assets/videos/fashion-01.mp4',
	[
607
	]
]);
$scene1->addElement([
'component',
'advanced/051',
	[
		[
'white',
'0 8vw',
'10vw',
'BUY NOW',
'#222',
'10vw',
'Anton'
		],
		[
'12vw',
'12vw'
		]
	],
1,
540,
540
]);
$movie->addScene($scene1);

// Finally, render the movie
$movie->render();

// Wait for the movie to be rendered
$movie->waitToFinish();

let movie = new Movie;
movie.setAPIKey(YOUR_API_KEY);
movie.set("width", 607);
movie.set("height", 1080);
movie.set("quality", "high");
movie.set("draft", true);

// Create the scenes of the movie

// Create SCENE 1
let scene1 = new Scene;
scene1.addElement([
"video",
"https://assets.json2video.com/assets/videos/fashion-01.mp4",
	[
607
	]
]);
scene1.addElement([
"component",
"advanced/051",
	[
		[
"white",
"0 8vw",
"10vw",
"BUY NOW",
"#222",
"10vw",
"Anton"
		],
		[
"12vw",
"12vw"
		]
	],
1,
540,
540
]);
movie.addScene(scene1);

// Finally, render the movie
movie.render();

// Wait for the movie to be rendered
movie.waitToFinish();

Button with mouse click component

← Documentation

Text styles

Component packs