button, 
button:active, 
button:focus {
    outline: none;
}

Если вы именно у одного блока хотите задать двойной фон то так:

.wrapper {
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, green 50%, red 50%);
}

Да бога ради, я вообще не встречал более удобной системы для натяжки своего диза на движок, чем есть в modx-се. Так что делайте все как обычно, хоть с gulp, хоть с webpack-ком (тут пишу про то с чем сам работаю). Весь процесс выглядит примерно так:
1) Кидаете финальный билд фронта на ftp (обычно это папка assets/templates/тут название вашего шаблона);
2) Далее в админке создаете шаблон, или открываете стандартный, копируете туда свою разметку.
3) Правите пути к js-сам, картинкам и css-сам.
4) У тут просто открываете страницу с этим шаблоном и радуетесь тому на сколько вы красава).

Ну а там конечно уже разбиваете шаблон на чанки, а где предполагается вывод динамического контента узайте сниппеты, коих много на любой вкус в репозитории, ну или пишете свои. Ну что такое сниппеты и чанки сами прочитаете.

Вот по быстрому накидал:
HTML:
<div class="wrapper"></div>
CSS:

body,html {
  width: 100%;
  height: 100%;
}

.wrapper {
  width: 100%;
  height: 100%;
  transition: background 1s;
  background: none;
}

JS:

(function (w, d) {
	w.onload = function () {
		var wp = d.querySelector('.wrapper'),
        colors = ['yellow', 'red', 'green', 'blue'],
        ln = colors.length;
    
    var changeColor = function (i) {
      if (i < ln) {
        setTimeout(function () {
          wp.style.cssText = "background: " + colors[i] +";"; 
          i++;
          changeColor(i);
        }, 2000);
      } else {
        changeColor(0);
      }
    };
    
    changeColor(0);
  };
}(window, document));

Это на чистом js, его легко можно заменить на jQuery.
Рабочий пример.

Вот вам пример:
HTML

<button id="open">Открыть</button>
<div id="form">
  <form action="#" method="post">
    <input type="text" value="" placeholder="найти" />
  </form>
</div>

CSS:

#form {
  padding: 20px;
  background-color: #000;
  display: none;
}

JS:

$(document).ready(function () {
  var searchBlock = $('#form');
  $(document).on('click', '#open', function () {
    searchBlock.slideToggle();
    return false;
  });
});

А вообще заглянули бы в код страницы, там все написано.