Відразу кидається в очі: на кнопці "Наступна", текст вилазить за межі кнопки

Там hover ефект, рішення по оформленню кнопки піддивився на інших ресурсах захотілось розібратись як працює , зразу і використав для себе.
По кнопці залишилось одне питання в якому не зміг розібратись(тому на мобільних і змінив оформлення) на мобільному якщо відбувається click по кнопці спочатку кнопка отримує сірий фон який потім перекриває #4AB9F2, намагався боротись з цим сірим фоном але без результату маю підозру на 

background-color: buttonface;

але переоприділити не зміг.Можливо хтось підскаже як це можна зробити.

Потрібно було зробити об'єкт  ключі якого це імена (або кодові позначення) письменників що вказують на  об'єкти які представляють собою конкретного письменника і містять масив цитат і властивості які вказують на фото і інші атрибути а то зараз є, наприклад, 5 об'єктів для Ліни Костенко і всі ці об'єкти 5 разів повторюють інформацію через властивості alt, src, author, show.

authors = {
  "Ліна Костенко": {
      quotes: [],
      src: "img/kostenko.jpg",
      alt: "Ліна Костенко"
   }
}

Коментарі погані тому що вони мало що пояснюють і писати коментарі для вказування на очевидні речі на зразок

  /* запит на сервер */
  var xhr = new XMLHttpRequest();

не варто. Краще б прокоментували для чого потрібна та чи інша змінна а то на початку коду програми є купа змінних а для чого вони незрозуміло.
Отак оформляти текст програми не потрібно:

       if(){
          
        }
        else if()

В коді є отакий рядок

/* загальна довжина списку */
lengthCurrentList.innerHTML = list.length;

Відлік починається від нуля і тут потрібно додавати 1 до властивості length. На сторінці 5 цитат Ліни Костенко а вказано що 4.

У кожного автора по 4 цитати list.length=4 додавати 1 не потрібно(якщо я правильно вас зрозумів,
Отак оформляти текст програми не потрібно: - можна детальніше я початківець і ще дуже багато чого не знаю!

length на то і length, аби показувати загальну кількість елементів

            if(optionSelected === "Всі автори"){
              item.show = false;
            }
            else if(optionSelected === item.author){
              item.show = false;
            }

Тут взагалі однакові дії в обох гілках, їх треба об'єднати:

            if(optionSelected === "Всі автори" || optionSelected === item.author){
              item.show = false;
            }

чи навіть

            if(["Всі автори",item.author].indexOf(optionSelected) > -1){
              item.show = false;
            }

Для відображення відсотку завантаження використав pace.js в Chrome,Opera працює нормально .

код не дивився, мудрувати що фон змусить епілептика працювати фабрикою виробництва піни до вогнегасників - не буду,

загалом -- класно, мені подобається