<?php defined( 'LS_ROOT_FILE' ) || exit; ?>
<script type="text/html" id="tmpl-button-presets">
	<div id="tmpl-button-presets-modal-window">
		<h1 class="kmw-modal-title"><?php _e('Choose Button Preset', 'LayerSlider') ?></h1>

		<ul>
			<!-- Row 1 -->
			<li data-options='{
				"padding-top": 15,
				"padding-right": 60,
				"padding-bottom": 15,
				"padding-left": 60,
				"font-family": "Arial, sans-serif",
				"font-size": 16,
				"font-weight": 700,
				"color": "#fff",
				"background-color": "#1b9af7"
			}'>
				<span class="ls-preset-button-1-1">BUTTON</span>
			</li>

			<li data-options='{
				"padding-top": 15,
				"padding-right": 60,
				"padding-bottom": 15,
				"padding-left": 60,
				"font-family": "Arial, sans-serif",
				"font-size": 16,
				"font-weight": 700,
				"color": "#fff",
				"background-color": "#1b9af7",
				"border-top": "3px solid white",
				"border-right": "3px solid white",
				"border-bottom": "3px solid white",
				"border-left": "3px solid white"
			}'>
				<span class="ls-preset-button-1-2">BUTTON</span>
			</li>
			<li data-options='{
				"padding-top": 15,
				"padding-right": 60,
				"padding-bottom": 15,
				"padding-left": 60,
				"font-family": "Arial, sans-serif",
				"font-size": 16,
				"font-weight": 700,
				"color": "#fff",
				"background-color": "#1b9af7",
				"border-radius": "5px",
				"border-bottom": "4px solid #106092"
			}'>
				<span class="ls-preset-button-1-3">BUTTON</span>
			</li>
			<li data-options='{
				"padding-top": 15,
				"padding-right": 60,
				"padding-bottom": 15,
				"padding-left": 60,
				"font-family": "Arial, sans-serif",
				"font-size": 16,
				"font-weight": 700,
				"color": "#fff",
				"background-color": "#1b9af7",
				"border-radius": "50px"
			}'>
				<span class="ls-preset-button-1-4">BUTTON</span>
			</li>

			<li class="small" data-options='{
				"width": 50,
				"height": 50,
				"font-size": 20,
				"line-height": "50px",
				"color": "#fff",
				"text-align": "center",
				"background-color": "#1b9af7",
				"border-radius": "100%",

				"html": "<i class=\"fa fa-arrow-right\"></i>"
			}'>
				<span class="ls-preset-button-1-5"><i class="fa fa-arrow-right"></i></span>
			</li>






			<!-- Row 2 -->
			<li data-options='{
				"padding-top": 15,
				"padding-right": 60,
				"padding-bottom": 15,
				"padding-left": 60,
				"font-family": "Arial, sans-serif",
				"font-size": 16,
				"font-weight": 700,
				"color": "#fff",
				"background-color": "#a5de37"
			}'>
				<span class="ls-preset-button-2-1">BUTTON</span>
			</li>

			<li data-options='{
				"padding-top": 15,
				"padding-right": 60,
				"padding-bottom": 15,
				"padding-left": 60,
				"font-family": "Arial, sans-serif",
				"font-size": 16,
				"font-weight": 700,
				"color": "#fff",
				"background-color": "#a5de37",
				"border-top": "3px solid white",
				"border-right": "3px solid white",
				"border-bottom": "3px solid white",
				"border-left": "3px solid white"
			}'>
				<span class="ls-preset-button-2-2">BUTTON</span>
			</li>
			<li data-options='{
				"padding-top": 15,
				"padding-right": 60,
				"padding-bottom": 15,
				"padding-left": 60,
				"font-family": "Arial, sans-serif",
				"font-size": 16,
				"font-weight": 700,
				"color": "#fff",
				"background-color": "#a5de37",
				"border-radius": "5px",
				"border-bottom": "4px solid #719c1c"
			}'>
				<span class="ls-preset-button-2-3">BUTTON</span>
			</li>
			<li data-options='{
				"padding-top": 15,
				"padding-right": 60,
				"padding-bottom": 15,
				"padding-left": 60,
				"font-family": "Arial, sans-serif",
				"font-size": 16,
				"font-weight": 700,
				"color": "#fff",
				"background-color": "#a5de37",
				"border-radius": "50px"
			}'>
				<span class="ls-preset-button-2-4">BUTTON</span>
			</li>

			<li class="small" data-options='{
				"width": 50,
				"height": 50,
				"font-size": 20,
				"line-height": "50px",
				"color": "#fff",
				"text-align": "center",
				"background-color": "#a5de37",
				"border-radius": "100%",

				"html": "<i class=\"fa fa-arrow-right\"></i>"
			}'>
				<span class="ls-preset-button-2-5"><i class="fa fa-arrow-right"></i></span>
			</li>




			<!-- Row 3 -->
			<li data-options='{
				"padding-top": 15,
				"padding-right": 60,
				"padding-bottom": 15,
				"padding-left": 60,
				"font-family": "Arial, sans-serif",
				"font-size": 16,
				"font-weight": 700,
				"color": "#fff",
				"background-color": "#feae1b"
			}'>
				<span class="ls-preset-button-3-1">BUTTON</span>
			</li>

			<li data-options='{
				"padding-top": 15,
				"padding-right": 60,
				"padding-bottom": 15,
				"padding-left": 60,
				"font-family": "Arial, sans-serif",
				"font-size": 16,
				"font-weight": 700,
				"color": "#fff",
				"background-color": "#feae1b",
				"border-top": "3px solid white",
				"border-right": "3px solid white",
				"border-bottom": "3px solid white",
				"border-left": "3px solid white"
			}'>
				<span class="ls-preset-button-3-2">BUTTON</span>
			</li>
			<li data-options='{
				"padding-top": 15,
				"padding-right": 60,
				"padding-bottom": 15,
				"padding-left": 60,
				"font-family": "Arial, sans-serif",
				"font-size": 16,
				"font-weight": 700,
				"color": "#fff",
				"background-color": "#feae1b",
				"border-radius": "5px",
				"border-bottom": "4px solid #c38717"
			}'>
				<span class="ls-preset-button-3-3">BUTTON</span>
			</li>
			<li data-options='{
				"padding-top": 15,
				"padding-right": 60,
				"padding-bottom": 15,
				"padding-left": 60,
				"font-family": "Arial, sans-serif",
				"font-size": 16,
				"font-weight": 700,
				"color": "#fff",
				"background-color": "#feae1b",
				"border-radius": "50px"
			}'>
				<span class="ls-preset-button-3-4">BUTTON</span>
			</li>

			<li class="small" data-options='{
				"width": 50,
				"height": 50,
				"font-size": 20,
				"line-height": "50px",
				"color": "#fff",
				"text-align": "center",
				"background-color": "#feae1b",
				"border-radius": "100%",

				"html": "<i class=\"fa fa-arrow-right\"></i>"
			}'>
				<span class="ls-preset-button-3-5"><i class="fa fa-arrow-right"></i></span>
			</li>




			<!-- Row 4 -->
			<li data-options='{
				"padding-top": 15,
				"padding-right": 60,
				"padding-bottom": 15,
				"padding-left": 60,
				"font-family": "Arial, sans-serif",
				"font-size": 16,
				"font-weight": 700,
				"color": "#fff",
				"background-color": "#ff505d"
			}'>
				<span class="ls-preset-button-4-1">BUTTON</span>
			</li>

			<li data-options='{
				"padding-top": 15,
				"padding-right": 60,
				"padding-bottom": 15,
				"padding-left": 60,
				"font-family": "Arial, sans-serif",
				"font-size": 16,
				"font-weight": 700,
				"color": "#fff",
				"background-color": "#ff505d",
				"border-top": "3px solid white",
				"border-right": "3px solid white",
				"border-bottom": "3px solid white",
				"border-left": "3px solid white"
			}'>
				<span class="ls-preset-button-4-2">BUTTON</span>
			</li>
			<li data-options='{
				"padding-top": 15,
				"padding-right": 60,
				"padding-bottom": 15,
				"padding-left": 60,
				"font-family": "Arial, sans-serif",
				"font-size": 16,
				"font-weight": 700,
				"color": "#fff",
				"background-color": "#ff505d",
				"border-radius": "5px",
				"border-bottom": "4px solid #b72a34"
			}'>
				<span class="ls-preset-button-4-3">BUTTON</span>
			</li>
			<li data-options='{
				"padding-top": 15,
				"padding-right": 60,
				"padding-bottom": 15,
				"padding-left": 60,
				"font-family": "Arial, sans-serif",
				"font-size": 16,
				"font-weight": 700,
				"color": "#fff",
				"background-color": "#ff505d",
				"border-radius": "50px"
			}'>
				<span class="ls-preset-button-4-4">BUTTON</span>
			</li>

			<li class="small" data-options='{
				"width": 50,
				"height": 50,
				"font-size": 20,
				"line-height": "50px",
				"color": "#fff",
				"text-align": "center",
				"background-color": "#ff505d",
				"border-radius": "100%",

				"html": "<i class=\"fa fa-arrow-right\"></i>"
			}'>
				<span class="ls-preset-button-4-5"><i class="fa fa-arrow-right"></i></span>
			</li>




			<!-- Row 5 -->
			<li data-options='{
				"padding-top": 15,
				"padding-right": 60,
				"padding-bottom": 15,
				"padding-left": 60,
				"font-family": "Arial, sans-serif",
				"font-size": 16,
				"font-weight": 700,
				"color": "#fff",
				"background-color": "#7b72e9"
			}'>
				<span class="ls-preset-button-5-1">BUTTON</span>
			</li>

			<li data-options='{
				"padding-top": 15,
				"padding-right": 60,
				"padding-bottom": 15,
				"padding-left": 60,
				"font-family": "Arial, sans-serif",
				"font-size": 16,
				"font-weight": 700,
				"color": "#fff",
				"background-color": "#7b72e9",
				"border-top": "3px solid white",
				"border-right": "3px solid white",
				"border-bottom": "3px solid white",
				"border-left": "3px solid white"
			}'>
				<span class="ls-preset-button-5-2">BUTTON</span>
			</li>
			<li data-options='{
				"padding-top": 15,
				"padding-right": 60,
				"padding-bottom": 15,
				"padding-left": 60,
				"font-family": "Arial, sans-serif",
				"font-size": 16,
				"font-weight": 700,
				"color": "#fff",
				"background-color": "#7b72e9",
				"border-radius": "5px",
				"border-bottom": "4px solid #554db7"
			}'>
				<span class="ls-preset-button-5-3">BUTTON</span>
			</li>
			<li data-options='{
				"padding-top": 15,
				"padding-right": 60,
				"padding-bottom": 15,
				"padding-left": 60,
				"font-family": "Arial, sans-serif",
				"font-size": 16,
				"font-weight": 700,
				"color": "#fff",
				"background-color": "#7b72e9",
				"border-radius": "50px"
			}'>
				<span class="ls-preset-button-5-4">BUTTON</span>
			</li>

			<li class="small" data-options='{
				"width": 50,
				"height": 50,
				"font-size": 20,
				"line-height": "50px",
				"color": "#fff",
				"text-align": "center",
				"background-color": "#7b72e9",
				"border-radius": "100%",

				"html": "<i class=\"fa fa-arrow-right\"></i>"
			}'>
				<span class="ls-preset-button-5-5"><i class="fa fa-arrow-right"></i></span>
			</li>

		</ul>
	</div>
</script>