CMS Developers

{{ require_css("//cdn2.hubspot.net/hubfs/346178/designmodo/ui-kit/ui-kit-content/css/ui-kit-styles.css") }}      
<!-- content-11 -->
<section class="content-11" style="background-color: {{ module.background_color.color }};">
    <div class="container">
        <span style="color: {{ module.text_color.color }};">{{ module.text }}</span> 
      	
      	{% if module.choose_cta_button %}
      		<div class="btn-cta">{% cta guid="{{ module.cta_button }}" %}</div>
        {% else %}
      	  {% set styles = 'background-color: {{ module.button.button_color.color }}; color: #ffffff;' %}
          {% set link = page_by_id(module.button.link).absolute_url if module.button.link else "#" %}

          {% if module.button.use_custom_link %}
              {% set link = module.button.custom_link %}
          {% endif %}

          {% if module.button.button_type == 'clear' %}
              {% set styles = 'background-color: transparent; border: 2px solid {{ module.button.button_color.color }}; color: {{ module.button.button_color.color }};' %}
          {% endif %}

          {% if link %}
          <a class="btn btn-large js-btn-color" href="{{ link }}" style="{{ styles }}" data-btn-type="{{ module.button.button_type }}" data-btn-color="{{ module.button.button_color.color }}" data-btn-hover-color="{{ module.button.button_hover_color.color }}">{{ module.button.button_text }}</a>
          {% endif %}
        {% endif %}
    </div>
</section>

          
        

          
            .btn-cta {
	display: inline-block;
  margin-left: 33px;
}

@media (max-width: 614px) {
	.btn-cta {
  	margin: 30px 0 0;
  }
}

          
        

          
            jQuery(document).ready(function($) {
    $(".content-11").each(function() {
        var o = $(this);
        if (o.hasClass("init")) {
            return;
        }
        o.addClass("init");
      
      	var style = "";

        o.find(".js-btn-color").each(function(){
            var btnType = $(this).data('btn-type');
            var btnColor = $(this).data('btn-color');
            var btnHoverColor = $(this).data('btn-hover-color');
            
            var btnId = "id-" + Math.random().toString().slice(2);
            $(this).attr("id", btnId);

            $(this).removeAttr('style');

             if(btnType === 'normal') {
                style += "#" + btnId + ".btn { background-color: " + btnColor + "; color: #ffffff; } \n";
                style += "#" + btnId + ".btn:hover, #" + btnId + ".btn:focus, #" + btnId + ".btn:active { background-color: " + btnHoverColor + "; } \n";
            }

            if(btnType === 'clear') {
                style += "#" + btnId + ".btn { background-color: transparent; border: 2px solid " + btnColor + "; color: " + btnColor + "; } \n";
                style += "#" + btnId + ".btn:hover, #" + btnId + ".btn:focus, #" + btnId + ".btn:active { background-color: " + btnColor + "; color: #ffffff; } \n";
            }
        });

        $("<style type='text/css'/>").html(style).appendTo("head");
    });
});