{% if widget.but_title %}
    <style>
        .{{ name_w }}_{{ widget.id }}_widget_btn_a{
            border: {{ widget.but_color }} solid 2px;
            color: {{ widget.but_color }};
            width: {% if not name_w == 'presentAerBim' %}80%{% else %}100%{% endif %};
            text-decoration: none;
            display: block;
            padding: {% if not name_w == 'b_functional_features' %}5{% else %}15{% endif %}px 0;
            border-radius: 5px;
            transition: 200ms;
            margin-top: 15px;
            text-align: center;
        }
        .{{ name_w }}_{{ widget.id }}_widget_btn_a:hover {
            background: {{ widget.but_color }};
            color: #ffffff;
            transition: 200ms;
        }
        .{{ name_w }}_{{ widget.id }}_align_btn{
            text-align: 
            {% if name_w == 'slide' or name_w == 'presentAerBim' %}
                unset
            {% elif name_w == 'b_functional_features' %}
                -webkit-right
            {% else %}
                -webkit-center
            {% endif %};
            width: 100%;
        }
        .{{ name_w }}_{{ widget.id }}_align_btn.desctop{
            display: block;
        }
        .{{ name_w }}_{{ widget.id }}_align_btn.mobile{
                display: none;
        }
        @media (max-width: 800px) {
            .{{ name_w }}_{{ widget.id }}_align_btn.desctop{
                display: none;
            }
            .{{ name_w }}_{{ widget.id }}_align_btn.mobile{
                display: block;
            }
        }
    </style>
    <div class="{{ name_w }}_{{ widget.id }}_align_btn{% if mobile %} {{ mobile }}{% else %} desctop{% endif %}">
        <a class="{{ name_w }}_{{ widget.id }}_widget_btn_a" href="{{ widget.url }}" target="_blank">
            {{ widget.but_title }}
        </a>
    </div>
{% endif %}