Помогите изменить кнопку HTML?

Question

Я создаю сайт на Wordpres/ Я вставляю этот код в Внешний вид/Виджеты/HTMLкод Проблема в том что я понятия не имею как сделать такую иконку при этом там меняется иконка- можно без иконки. Помогите пожалуйста, отредактируйте именно мой код. При желании можете свою иконку интересную вставить :Ю Отблагодарю.

<script>
var colorArray = [ "#f2f3f4" ]; // массив с цветами
var i = 0; // итератор

function changeColor() {
    var currentColor = colorArray[i];
    document.body.style.background = currentColor;
    localStorage.setItem('backgroundColor', currentColor);
    i++;
    if( i > colorArray.length - 1){
        i = 0;
    }
}

function setDefaultColor() {    
    document.body.style.removeProperty( 'background' );
    localStorage.removeItem('backgroundColor');
}

</script>
<input type="button" onclick="changeColor()" value="Изменить фон">
<input type="button" onclick="setDefaultColor()" value="По умолчанию">

<script>
  window.onload = function() {
    document.body.style.background = localStorage.getItem('backgroundColor');
  };
</script>

Answer 1

Нужно просто поменять стили кнопок в css файле, надеюсь понял правильно.

input { 
  border:none; /*  убираем обводку кнопки */
  cursor:pointer; 
  background-color: transparent; // прозрачный фон, можно поставить свой цвет 
 }
input:focus 
{
  outline:none; // убираем обводку при нажатии
}

<input type="button" value="Сменить фон"/>

Answer 2

Простой вариант..

/* Для хранения изменения, не будет работать в сниппете, по этому раскомментировать на сайте
if(localStorage.getItem('ThemeDark') === 'true')
  document.body.classList.add('dark');
*/

let theme = document.getElementById('theme'), // Берём кнопку
    isTheme = document.body.classList.contains('dark'); // Проверяем наличие класса .dark у элемента body

theme.innerHTML = '<i class="fas fa-'+(isTheme ? 'sun' : 'moon')+'"></i><span>Включить '+(isTheme ? 'светлую' : 'тёмную')+' тему</span>'; // Меняем содержимое кнопки в зависимости от проверки выше

theme.addEventListener('click', function(){ // Вешаем обработчик на кнопку
  document.body.classList.toggle('dark'); // Выдаём класс или убираем, в зависимости от того есть ли он.
  isTheme = document.body.classList.contains('dark'); // Переписываем значение проверки
  theme.innerHTML = '<i class="fas fa-'+(isTheme ? 'sun' : 'moon')+'"></i><span>Включить '+(isTheme ? 'светлую' : 'тёмную')+' тему</span>'; // Меняем содержимое кнопки.
  
  /* ТОЖЕ ЧТО И ВНАЧАЛЕ
  localStorage.setItem('ThemeDark', isTheme);
  */
});

@import url('//use.fontawesome.com/releases/v5.8.2/css/all.css');


#theme {
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin: 0;
  border: 0;
  background-color: transparent;
  font: inherit;
  color: #000;
  cursor: poitner;
}

#theme:hover {
  text-decoration: underline;
}

#theme > i {
  margin-right: 5px;
}

body.dark {
  background: gray;
  color: #fff;
}

body.dark #theme {
  color: #fff;
}

<button id="theme">Включить тёмную тему</button>

БЛОГ НА HUSL

Помогите изменить кнопку HTML?

Ответы (2 шт):