WTS - Affiliate Integration Options: Search Box (Branded)

by Paulo Ávila

HTML

<script src="http://static.waytostay.com/media/widget/waytostay-widget1.js?type=1&amp;lang=1&amp;bgcolor=1&amp;corner=1&amp;button=1&amp;arrow=1&amp;size=1&amp;opennew=1&amp;orgid=0"></script>
<br />
<div class="wts-button-wrap">
    <a href="#" class="waytostay-widget-button wts-button-bg1" target="_blank">
        <span>Search</span>
    </a>
</div>
<br />
<div class="wts-button-wrap">
    <a href="#" class="waytostay-widget-button wts-button-bg3" target="_blank">
        <span>Buscar</span>
    </a>
</div>
<br />
<div class="wts-button-wrap">
    <a href="#" class="waytostay-widget-button wts-button-bg2" target="_blank">
        <span>Recherchez</span>
    </a>
</div>

CSS

.wts-button-wrap {
    position: relative !important;
}

.wts-button-wrap a.waytostay-widget-button,
.wts-button-wrap a.waytostay-widget-button span {
    background-image: url('/assets/widget-sprites.png') !important;
}

.wts-button-wrap a.waytostay-widget-button.wts-button-bg1 { background-position: 0 -443px !important; }
.wts-button-wrap a.waytostay-widget-button.wts-button-bg1 span { background-position: right -466px !important; }
.wts-button-wrap a.waytostay-widget-button.wts-button-bg3 { background-position: 0 -535px !important; }
.wts-button-wrap a.waytostay-widget-button.wts-button-bg3 span { background-position: right -558px !important; }
.wts-button-wrap a.waytostay-widget-button.wts-button-bg2 { background-position: 0 -489px !important; }
.wts-button-wrap a.waytostay-widget-button.wts-button-bg2 span { background-position: right -512px !important; }

.wts-button-wrap a.waytostay-widget-button {
    display: block !important;
    position: relative !important;
    margin: 0 !important;
    width: 75px !important;
    height: 23px !important;
    color: white !important;
    font-family: Arial !important;
    font-size: 11px !important;
    font-weight: bold !important;
    line-height: 23px !important;
    text-decoration: none !important;
    text-align: center !important;
}

.wts-button-wrap a.waytostay-widget-button span {
    display: inline-block !important;
    position: absolute !important;
    top: 0px !important;
    right: -10px !important;
    width: 100% !important;
    padding-right: 8px !important;
}

/* This is here strictly to be able to show the image file in JSFIDDLE */
.wts-button-wrap a.waytostay-widget-button,
.wts-button-wrap a.waytostay-widget-button span {
    background-image:...