5 / 5 / 1
Регистрация: 03.07.2014
Сообщений: 75

При наведении на кнопку заливать фон слева направо в течении двух секунд

25.08.2014, 15:47. Показов 11978. Ответов 8
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Доброго времени суток! хочу спросить, как мне сделать так, чтобы при наведении на кнопку фон заливался слева на право в течении двух секунд? Вот пример моего кода:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<style>
.animated {
  -webkit-transition: all 2s ease-in;
  -ms-transition: all 2s ease-in;
  -o-transition: all 2s ease-in;
  -moz-transition: all 2s ease-in;
  transition: all 2s ease-in; 
    border: 1px solid black;
    background: none;
border: 2px solid #fff;
-moz-border-radius: 2px;
border-radius: 2px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 12px;
font-family: Corkiregular;
height: 60px;
letter-spacing: 2px;
line-height: 60px;
outline: none;
padding: 0 13px 0 25px;
position: relative;
text-transform: uppercase;
}
    .animated:hover{
   background-color:#000;   
    }
</style>
подскажите в чем проблема?
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
25.08.2014, 15:47
Ответы с готовыми решениями:

Как при наведении на li менять фон у блока слева
Добрый вечер, подскажите как можно сделать так чтобы при наведении на пункт li менялся фон у блока слева. &lt;main...

Менять фон всей страницы при наведении на кнопку
Здравствуйте, хотел сделать на заготовке станицы кнопку(not push), чтобы при наведении менялся фон всей станицы(это будет что-то вроде...

При старте мышка не реагирует в течении 6-7 секунд
В общем такая проблема. Искал на этом форуме и на других формах ответа, но не нашел. При старте Виндоус 10 после загрузки рабочего...

8
 Аватар для killlfun
102 / 102 / 39
Регистрация: 25.02.2014
Сообщений: 321
25.08.2014, 16:02
Hadoukenlol, воспользуйтесь свойством transition
0
5 / 5 / 1
Регистрация: 03.07.2014
Сообщений: 75
25.08.2014, 16:06  [ТС]
ну я по сути им и пользуюсь, но окрашивается сразу вся кнопка, а мне нужно слева на право. Подскажи, пожалуйста, что именно нужно сделать
0
5 / 5 / 2
Регистрация: 14.06.2014
Сообщений: 201
25.08.2014, 16:08
Hadoukenlol, градиентное окрашивание Вы имейте ввиду?
0
5 / 5 / 1
Регистрация: 03.07.2014
Сообщений: 75
25.08.2014, 16:10  [ТС]
Нет, я имею ввиду, при наведении мышью на кнопку, фон заливается как загрузка (слева направо)

как на этом сайте: http://www.dunckelfeld.de/en/projekte/
0
 Аватар для killlfun
102 / 102 / 39
Регистрация: 25.02.2014
Сообщений: 321
25.08.2014, 16:12
Лучший ответ Сообщение было отмечено Hadoukenlol как решение

Решение

Hadoukenlol, пример
1
5 / 5 / 1
Регистрация: 03.07.2014
Сообщений: 75
26.08.2014, 13:14  [ТС]
Спасибо большое!

Добавлено через 1 час 34 минуты
теперь другая проблема, фон перекрывает текст на кнопке.
z-index не помогает. Как решить такую проблему?
http://jsfiddle.net/4pm7ddjf/

Добавлено через 19 часов 22 минуты
ребят, подскажите, пожалуйста, почему фон перекрывает текст на кнопке?
0
 Аватар для killlfun
102 / 102 / 39
Регистрация: 25.02.2014
Сообщений: 321
26.08.2014, 13:53
Лучший ответ Сообщение было отмечено Hadoukenlol как решение

Решение

Hadoukenlol, можно вот так:
http://jsfiddle.net/4pm7ddjf/2/
Если что подкоректируйте.
Ширину блока который заливается исправляй тут:
CSS
1
width:200px;
HTML5
1
2
3
4
<div style="background-color: #000;">
    <div class="buttonanim"><span style="font-size: 150%;">Кликни меня</span>
    </div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 .buttonanim {
  border: 1px solid black;
    background: none;
border: 2px solid #fff;
-moz-border-radius: 2px;
border-radius: 2px;
color: blue;
cursor: pointer;
display: inline-block;
font-size: 12px;
height: 60px;
letter-spacing: 2px;
line-height: 60px;
width:200px;
outline: none;
/*padding: 0 13px 0 25px;*/
position: relative;
text-transform: uppercase;
    z-index:1;
   }
span{
    position:absolute;
}
   .buttonanim:hover::before{
    width: 100%;color:#000;
   }
   .buttonanim::before{
    transition-timing-function: linear;
    transition-duration: 250ms;
    content: '';
    z-index:0;
    position: absolute; /* Абсолютное позиционирование */
    height: 100%; width: 0;
    background: #fff; /* Фон */
color:#000;
 
   }
1
5 / 5 / 1
Регистрация: 03.07.2014
Сообщений: 75
26.08.2014, 14:14  [ТС]
killlfun, Спасибо большое!
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
26.08.2014, 14:14
Помогаю со студенческими работами здесь

Установить, является ли последновательность при просмотре слева направо упорядоченной
Здравствуйте, форумчане.Есть одно условие задачи и есть решение. Вот условие:дано натуральное число, установить является ли...

Удалить пробелы из исходной строки при просмотре ее слева направо
Помогите, пожалуйста, написать программу формирования сжатой строки символов с помощью NASM/GAS/FAMS. Сжатие заключается в удалении...

Определить номер минимальной цифры числа при счете слева направо
Ввести с клавиатуры натуральное число и определить номер минимальной цифры числа при счете слева направо. (Тупо через циклы).

Установить, является ли последовательность цифр при просмотре их слева направо упорядоченной по возрастанию
Есть ли у кого-то готовое решение ? Заранее спасибо. Дано натуральное число. Установить, является ли последовательность его цифр при...

Является ли последовательность его цифр при просмотре их слева направо упорядоченной по возрастанию
Помогите разобраться с кодом, буквально построчно, буду очень благодарен. Задание: Дано натуральное число. Установить, является ли...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Опции темы

Новые блоги и статьи
Access
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов
Argus19 22.11.2025
Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином.
Programma_Boinc 20.11.2025
Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
Ломающие изменения в C#.NStar Alpha
Etyuhibosecyu 20.11.2025
Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .
Мысли в слух
kumehtar 18.11.2025
Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .
Создание Single Page Application на фреймах
krapotkin 16.11.2025
Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .
Фото: Daniel Greenwood
kumehtar 13.11.2025
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru