Как сделать, чтобы кнопки увеличивались при наведении курсора?

@antoha789 · Регистрация: 23.05.2015

Студворк — интернет-сервис помощи студентам

Здравствуйте! Скажите пожалуйста как сделать чтобы кнопки увеличивались как на этом сайте

Кликните здесь для просмотра всего текста

http://tr24.ru

@Mikhail Shell · 23.05.2015, 20:35

antoha789, попробуйте так:

HTML5
1
2
3
<button>
<img src="some_pic.png" />
</button>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
button{
width:120px;
height:40px;
text-align:center;
}
button:hover{
box-shadow:1px 1px 1px black;
}
button img{
position:absolute;
width:120px;
}
button:hover img{
width:125px;
}

@antoha789 · 23.05.2015, 21:01 **[ТС]**

Mikhail Shell, не получается

@Mikhail Shell · 24.05.2015, 11:44

Сообщение от antoha789

не получается

Что именно?

@Jho · 24.05.2015, 13:17

Дайте нам пример кода,что бы мы могли понять,каким образом реализованы кнопки

@antoha789 · 24.05.2015, 13:38 **[ТС]**

вот html код

Кликните здесь для просмотра всего текста

css

Кликните здесь для просмотра всего текста

.blk .bt {
float: left;
margin: 0px 7px 7px 0px;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
border-top: 1px solid rgba(255, 255, 255, 0.2);
position: relative;

вот кнопка

@antoha789 · 24.05.2015, 13:41 **[ТС]**

Jho,

вот html код

Кликните здесь для просмотра всего текста

css

Кликните здесь для просмотра всего текста

.blk .bt {
float: left;
margin: 0px 7px 7px 0px;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
border-top: 1px solid rgba(255, 255, 255, 0.2);
position: relative;

вот кнопка

@rysalka · 24.05.2015, 16:08

там используется js
но код там бредовый...

можеш так написать:
css

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.img{
    display: inline-block;
    position: relative;
    width: 212px;
    height: 103px;
    background: url(image.png) 0px 0px no-repeat;
    text-decoration: none;
 
    -webkit-transition:all 0.2s ease;
    -moz-transition:all 0.2s ease;
    -o-transition:all 0.2s ease;
    transition:all 0.2s ease;
}
.img:hover {
    transform: scale(1.1,1.1);
}

html

HTML5
1
<a href="#" class="img"></a>

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@antoha789 0 / 0 / 0 Регистрация: 23.05.2015 Сообщений: 4

	Как сделать, чтобы кнопки увеличивались при наведении курсора? 23.05.2015, 20:30. Показов 10165. Ответов 7 Метки нет (Все метки) Здравствуйте! Скажите пожалуйста как сделать чтобы кнопки увеличивались как на этом сайте Кликните здесь для просмотра всего текста http://tr24.ru 0

@antoha789 0 / 0 / 0 Регистрация: 23.05.2015 Сообщений: 4
	23.05.2015, 21:01 [ТС]
	Mikhail Shell, не получается 0

@Jho 9 / 9 / 5 Регистрация: 16.04.2015 Сообщений: 53
	24.05.2015, 13:17
	Дайте нам пример кода,что бы мы могли понять,каким образом реализованы кнопки 0

@antoha789 0 / 0 / 0 Регистрация: 23.05.2015 Сообщений: 4
	24.05.2015, 13:38 [ТС]
	вот html код Кликните здесь для просмотра всего текста <div class="b1 bt"> <a href="#" style="background: url('template/b1.png')/template/b13.png/no-repeat 0 0" class="long"></a> </div> css Кликните здесь для просмотра всего текста .blk .bt { float: left; margin: 0px 7px 7px 0px; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2); border-top: 1px solid rgba(255, 255, 255, 0.2); position: relative; вот кнопка Миниатюры 0

@antoha789 0 / 0 / 0 Регистрация: 23.05.2015 Сообщений: 4
	24.05.2015, 13:41 [ТС]
	Jho, вот html код Кликните здесь для просмотра всего текста <div class="b1 bt"> <a href="#" style="background: url('template/b1.png')/template/b13.png/no-repeat 0 0" class="long"></a> </div> css Кликните здесь для просмотра всего текста .blk .bt { float: left; margin: 0px 7px 7px 0px; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2); border-top: 1px solid rgba(255, 255, 255, 0.2); position: relative; вот кнопка 0