{"title":"Adding Button Layer","id":51933,"link":"https:\/\/env.averta.net\/en\/step\/adding-button-layer\/","parent":[51827],"content":"<p>If you need to add a button over your slide, you can use either text or button layer. To specify the layer, you need to use <code>ms-layer<\/code> class name and set the type by <code>data-type=\"button\"<\/code> or <code>data-type=\"text\"<\/code>same as other layer types. The example below shows how to add a button over a slide.<\/p>\n<pre class=\"lang:xhtml decode:true \">\t&lt;div id=\"masterslider\" class=\"master-slider\"&gt;\r\n\t\t&lt;div class=\"ms-slide\"&gt;\r\n\t\t\t&lt;!-- .... --&gt;\r\n            &lt;a href=\"#\" data-type=\"button\" class=\"ms-layer\"&gt;\r\n                Button label\r\n            &lt;\/a&gt;\r\n\r\n            &lt;!-- or --&gt;\r\n            \r\n            &lt;div class=\"ms-layer\" data-type=\"text\"&gt;\r\n            \t&lt;a href=\"#\"&gt;\r\n                \tButton label\r\n            \t&lt;\/a&gt;\r\n            &lt;\/div&gt;\r\n\t\t\t&lt;!-- .... --&gt;\r\n\t\t&lt;\/div&gt;\r\n\t\t&lt;!-- .... --&gt;\r\n\t&lt;\/div&gt;<\/pre>\n<p>This article only describes how to create a button layer. If you need more information about layers, check out the following articles:<\/p>\n<ul>\n<li><a href=\"https:\/\/env.averta.net\/en\/step\/positioning-layers\/?b=51939,51939\" title=\"Positioning Layers\">Positioning layers<\/a><\/li>\n<li><a href=\"https:\/\/env.averta.net\/en\/step\/defining-animation-for-the-layers\/?b=51959,51959\" title=\"Defining Animation for the Layers\">Animating layers<\/a><\/li>\n<li><a href=\"https:\/\/env.averta.net\/en\/step\/masking-a-layer\/?b=51971,51971\" title=\"Masking a Layer\">Masking layers<\/a><\/li>\n<li><a href=\"https:\/\/env.averta.net\/en\/step\/adding-a-layer-parallax-effect\/?b=51972,51972\" title=\"Adding a Layer Parallax Effect\">Layer parallax effect<\/a><\/li>\n<\/ul>\n","type":"solution"}