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": 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"
}
Example 2
{
"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 3
{
"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
}
]
}
]
}