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:

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/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:

Warning: substr() expects parameter 1 to be string, array given in /var/www/json2video.com/html/tpl/common.php on line 1096

{
    "width": 1920,
    "height": 1080,
    "quality": "high",
    "draft": true,
    "scenes": [
        {
            "background-color": "#4392F1",
            "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,
                    "width": -1,
                    "height": -1,
                    "start": 0,
                    "extra-time": 0,
                    "z-index": 0,
                    "cache": true,
                    "position": "custom",
                    "x": 0,
                    "y": 0
                }
            ],
            "duration": -1
        }
    ],
    "resolution": "full-hd"
}

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 = 1920;
$movie->height = 1080;
$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/050',
	[
		[
'#E3170A',
'0.2vw solid rgba(0,0,0,20%)',
'3vw',
'0 15vw',
'inset -1vw -1vw 1vw rgba(0,0,0,0.2)',
'Subscribe!',
'.3vw .3vw rgba(0,0,0,0.4)',
'10vw',
'Anton'
		]
	],
10,
-1,
-1,
0,
0,
0,
true,
'custom',
0,
0
]);
$scene1->duration = -1;
$movie->addScene($scene1);
$movie->resolution = 'full-hd';

// 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", 1920);
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.set("background-color", "#4392F1");
scene1.addElement([
"component",
"advanced/050",
	[
		[
"#E3170A",
"0.2vw solid rgba(0,0,0,20%)",
"3vw",
"0 15vw",
"inset -1vw -1vw 1vw rgba(0,0,0,0.2)",
"Subscribe!",
".3vw .3vw rgba(0,0,0,0.4)",
"10vw",
"Anton"
		]
	],
10,
-1,
-1,
0,
0,
0,
true,
"custom",
0,
0
]);
scene1.set("duration", -1);
movie.addScene(scene1);
movie.set("resolution", "full-hd");

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

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

Example 2

JSON
PHP
NodeJS

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

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 = 320;
$movie->quality = 'high';
$movie->draft = true;

// Create the scenes of the movie

// Create SCENE 1
$scene1 = new Scene;
$scene1->background_color = '#FAF3DD';
$scene1->addElement([
'component',
'advanced/050',
	[
		[
'#E3170A',
'0.2vw solid rgba(0,0,0,20%)',
'3vw',
'0 15vw',
'inset -1vw -1vw 1vw rgba(0,0,0,0.2)',
'Subscribe!',
'.3vw .3vw rgba(0,0,0,0.4)',
'10vw',
'Anton'
		]
	],
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", 320);
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", "#FAF3DD");
scene1.addElement([
"component",
"advanced/050",
	[
		[
"#E3170A",
"0.2vw solid rgba(0,0,0,20%)",
"3vw",
"0 15vw",
"inset -1vw -1vw 1vw rgba(0,0,0,0.2)",
"Subscribe!",
".3vw .3vw rgba(0,0,0,0.4)",
"10vw",
"Anton"
		]
	],
10
]);
movie.addScene(scene1);

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

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

Example 3

JSON
PHP
NodeJS

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

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 = 320;
$movie->quality = 'high';
$movie->draft = true;

// Create the scenes of the movie

// Create SCENE 1
$scene1 = new Scene;
$scene1->background_color = '#FFFFFF';
$scene1->addElement([
'component',
'advanced/050',
	[
		[
'black',
'0 15vw',
'2vw 2vw 0 limegreen',
'NEXT &#187;',
'10vw',
'Anton'
		]
	],
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", 320);
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", "#FFFFFF");
scene1.addElement([
"component",
"advanced/050",
	[
		[
"black",
"0 15vw",
"2vw 2vw 0 limegreen",
"NEXT &#187;",
"10vw",
"Anton"
		]
	],
10
]);
movie.addScene(scene1);

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

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

Animated button component

← Documentation

Text styles

Component packs