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