Тестовый

Варианты кнопок "вернуться назад" для иконки в Мобильной версии

2026-05-11 21:47 Заметки
Набираю в поиске в гугле:
сделать красивую кнопку назад html
Чтобы создать красивую и функциональную кнопку «Назад» в HTML, используйте тег <a> или <button> в сочетании с JavaScript-функцией history.back(), которая возвращает пользователя на предыдущую страницу. Современный стиль обеспечивается CSS-свойствами, такими как плавный переход (transition), скругление углов (border-radius) и тени.
sky.pro +3
Вот несколько стильных вариантов:
1. Минималистичная кнопка-ссылка (рекомендуется)
Этот вариант использует тег <a> и выглядит как современная кнопка.
html
<style>
.back-button {
display: inline-flex;
align-items: center;
text-decoration: none;
color: #333;
font-family: Arial, sans-serif;
font-weight: bold;
padding: 10px 20px;
border: 2px solid #ddd;
border-radius: 25px;
transition: all 0.3s ease;
background-color: white;
}

.back-button:hover {
background-color: #f4f4f4;
border-color: #999;
transform: translateX(-3px); /* Легкое движение влево */
}

.back-button::before {
content: '←';
margin-right: 8px;
font-size: 1.2em;
}
</style>

<a href="javascript:history.back()" class="back-button">Назад</a>
Используйте код с осторожностью.
2. Кнопка с градиентом (более заметная)
Идеально подходит для мобильных интерфейсов.
html
<style>
.back-btn-grad {
padding: 12px 24px;
background: linear-gradient(135deg, #6e8efb, #a777e3);
color: white;
text-decoration: none;
border-radius: 30px;
font-family: sans-serif;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: transform 0.2s;
}

.back-btn-grad:hover {
transform: scale(1.05);
}
</style>

<a href="javascript:history.back()" class="back-btn-grad">
&#8249; Назад
</a>
Используйте код с осторожностью.
3. Круглая кнопка-иконка
Используется специальная стрелка через CSS.
html
<style>
.round-back {
display: inline-block;
padding: 10px 15px;
background-color: #333;
color: white;
text-decoration: none;
border-radius: 50%; /* Делает кнопку круглой */
transition: background-color 0.3s;
}

.round-back:hover {
background-color: #555;
}
</style>

<a href="javascript:history.back()" class="round-back">&#8249;</a>
Используйте код с осторожностью.
Ключевые советы по реализации:
  • Функционал: Всегда используйте href="javascript:history.back()" или onclick="history.back()" для надежного возврата.
  • Визуализация: Добавляйте transition: all 0.3s ease; для плавного изменения цвета при наведении.
  • Интерактивность: Используйте псевдокласс :hover для смены цвета или небольшого смещения (transform: translateX(-3px)), чтобы показать, что кнопка кликабельна.
Иконки: Вставляйте символы ← или &#8249; перед текстом, чтобы кнопка читалась быстрее.
  • sky.pro +1
Примечание: Также можно реализовать кнопку, которая убегает от мышки, или стилизовать стандартный элемент <button>
Вот ссылка на поисковую выдачу