Зелёная кнопка с эффектом - Скрипты для uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Понедельник, 05.12.2016
Скрипты для uCoz » Кнопки для сайта uCoz » Зелёная кнопка с эффектом

Аудиоплеер для сайта uCozАудиоплеер с плейлистом для сайта
Видеоплеер для сайта uCozВидеоплеер с плейлистом для сайта
Меню для сайта uCozВертикальное меню для сайта uCoz
Выпадающее меню для сайта uCozГоризонтальное меню для сайта uCoz
Круглое меню для сайта uCozВид материалов для сайта uCoz
Вид материалов Аудио для uCozВид материалов Видео для uCoz
Галерея для сайта uCozГенераторы для сайта uCoz
Контейнер для контентаКнопки для сайта uCoz
Слайдер для сайта uCozСчётчик для сайта uCoz
Часы для сайта uCozТекстовые эффекты
Таблица цветов для сайта uCozЭффекты для сайта uCoz
Эффекты курсораЭффекты увеличения
Мини чат для сайта uCozРадио для сайта uCoz
Скрипты для юКозИгры для сайта uCoz
Окна для сайта uCozИнформеры для сайта uCoz
Флеш и анимации для сайтаКалендарь для сайта uCoz
Мониторинг серверов для ucozСлайдшоу для сайта uCoz



Адаптивный сайт - aTmpl



Зелёная кнопка с эффектом

Зелёная кнопка с раздвигающимся эффектом CSS3




При наведении курсора на кнопку верхняя и нижняя части выезжают,в них содержится пояснительная информация относящаяся к скачиваемому файлу.Не обязательно переносить стили кнопки в таблицу стилей,можно устанавливать весь код по месту.Кнопка настроена для работы,если появятся вопросы или предложения добавьте их в форму комментариев материала.





Код кнопки для установки


<style>
.dsVbutton {
width: 200px;
margin: 40px auto;
}
.dsVbutton a {
display: block;
height: 50px;
width: 200px;
/*ТИП*/
color: white;
font: 17px/50px Helvetica, Verdana, sans-serif;
text-decoration: none;
text-align: center;
text-transform: uppercase;
/*ГРАДИЕНТ*/
background: #299a0b; /* Old browsers */
background: -moz-linear-gradient(top,  #299a0b 0%, #299a0b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#299a0b), color-stop(100%,#299a0b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #299a0b 0%,#299a0b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #299a0b 0%,#299a0b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #299a0b 0%,#299a0b 100%); /* IE10+ */
background: linear-gradient(top,  #299a0b 0%,#299a0b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#299a0b', endColorstr='#299a0b',GradientType=0 ); /* IE6-9 */
}
.dsVbutton a, p {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}
p {
background: #222;
display: block;
height: 40px;
width: 180px;
margin: -50px 0 0 10px;
/*ТИП*/
text-align: center;
font: 12px/45px Helvetica, Verdana, sans-serif;
color: #fff;
/*ПОЛОЖЕНИЕ*/
position: absolute;
z-index: -1;
/*ПЕРЕХОД*/
  -webkit-transition: margin 0.5s ease;
-moz-transition: margin 0.5s ease;
-o-transition: margin 0.5s ease;
-ms-transition: margin 0.5s ease;
transition: margin 0.5s ease;
}
/*НАВЕДЕНИЕ*/
.dsVbutton:hover .Vbottom {
margin: -10px 0 0 10px;
}
.dsVbutton:hover .Vtop {
margin: -80px 0 0 10px;
line-height: 35px;
}
/*НАЖАТИЕ*/
.dsVbutton a:active {
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top,  #00b7ea 36%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
}
.dsVbutton:active .Vbottom {
margin: -20px 0 0 10px;
}
.dsVbutton:active .Vtop {
margin: -70px 0 0 10px;
}
</style>
<div class="dsVbutton">
<a href="#">Скачать</a>
<p class="Vtop">нажмите чтобы скачать</p>
<p class="Vbottom">10MB .rar</p>
</div>



Проверьте код кнопки в редакторе

Вставьте код кнопки для установки в HTML редактор и проверьте.









Русские шрифты



Ссылка:
BB code:




  • ©
  • | Просмотров: 3485 | Добавил: IZOTOP | Рейтинг: 4.0/4
    | Теги: Green, CSS3, effect, button, кнопку

    Всего комментариев: 27
    0   Спам
    26 alexss   (18.03.2016 19:20)
    Аватар alexss В ПРОБНИКЕ ВСЕ РАБОТАЕТ НА САЙТЕ НЕ ВЫДВИГАЕТЬСЯ

    0  
    27 bootstraptema_   (20.03.2016 07:05)
    Аватар bootstraptema_ Стили скорее всего наследуются, измените 2 параметра на эти:

    Код

    .dsVbutton a, .dsVbutton p {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
    -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
    box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
    }
    .dsVbutton p {
    background: #222;
    display: block;
    height: 40px;
    width: 180px;
    margin: -50px 0 0 10px;
    /*ТИП*/
    text-align: center;
    font: 12px/45px Helvetica, Verdana, sans-serif;
    color: #fff;
    /*ПОЛОЖЕНИЕ*/
    position: absolute;
    z-index: -1;
    /*ПЕРЕХОД*/
      -webkit-transition: margin 0.5s ease;
    -moz-transition: margin 0.5s ease;
    -o-transition: margin 0.5s ease;
    -ms-transition: margin 0.5s ease;
    transition: margin 0.5s ease;
    }

    0   Спам
    25 Администратор9721   (13.03.2014 22:08)
    Аватар Администратор9721 Спасибо.. Я вынужден был заняться сайтом) поэтому не много в этом понимаю, но одно понял, что пользоваться кроме HTML редактора на юкозе ничем не стоит) Вот я и накосячил. Вы мне отрыли мои совсем закрытые глаза, то то мне не нравилась "Заменять переводы строк тегом <BR>" , а она стоит в панели ВВ)) а в HTML нет.. Видимо делать сайты не моё) Спасибо огромное , вы ответом на этот вопрос ответили мне ещё на 20-ть)). Но по другому в детский сайт мне было попасть трудно))) Правда кнопка у меня не заработала.. видимо у меня уже где-то косяки)

    +1   Спам
    23 IZOTOP   (13.03.2014 13:54)
    Аватар IZOTOP Вам нужно указать адрес страницы на которой установлена кнопка

    0   Спам
    24 Администратор9721   (13.03.2014 17:37)
    Аватар Администратор9721 Спасибо за внимание. http://teremokmdou11.ucoz.ru/index/poleznye_fajly/0-16

    Еще вопрос про меню для скачивания coutere strike. Не работает в ослике IE и старой опере.. Правда я заменил картинку на текст, т.е у меня два поля с текстом. http://teremokmdou11.ucoz.ru/index/sotrudniki/0-43

    0   Спам
    18 Дарья   (22.10.2013 04:26)
    Аватар Дарья Здравствуйте! кнопка установилась, а вот содержимого нет. Куда вставлять описание и вместо скачивания идет прослушивание файла. а как же сделать что бы скачивался?

    0   Спам
    19 IZOTOP   (23.10.2013 20:03)
    Аватар IZOTOP Хочу обратить внимание на установленные плагины в браузере.
    В частности VLC, если такой плагин установлен вместо скачивания будет включено воспроизведение.

    0   Спам
    20 Дарья   (24.10.2013 01:48)
    Аватар Дарья А как это можно узнать? установлен или нет?

    0   Спам
    21 IZOTOP   (24.10.2013 20:50)
    Аватар IZOTOP Очень жаль что у меня нет возможности находиться рядом с Вами чтобы быть свидетелем используемого Вами браузера.
    В настоящее время все популярные браузеры являются бесплатным программным обеспечением, попробуйте в разных.
    Если в одном работает, а в другом нет - можно продолжить тему.

    0   Спам
    22 Дарья   (25.10.2013 03:18)
    Аватар Дарья Мне нужно создать анимацию посоветуйте какую нибудь другую программу, если вам не трудно, а то с той мне снова рисковать не хочется. А что на счет кнопки, я вроде бы поняла что и как сделать. Спасибо за отзывчивость и понимание.

    0   Спам
    16 moty   (27.05.2013 17:35)
    Аватар moty И еще вопрос на главной станице вашего сайта есть такой банер сделай сайт при наведении на него он переворачивается можно его как то опубликовать для публичного использования, хочу такой же!?

    +1   Спам
    17 IZOTOP   (27.05.2013 18:46)
    Аватар IZOTOP Такой материал существует, он находится ЗДЕСЬ.

    0   Спам
    14 moty   (26.05.2013 19:39)
    Аватар moty Спасибо большое, правда теперь уже не тот эффект от кнопки, блин клевая кнопка зараза, ну ни чего не поделаешь. Я так хотел сделать меню из этой кнопки клева смотрится!

    +1   Спам
    15 IZOTOP   (27.05.2013 10:02)
    Аватар IZOTOP Советую обратится к хостеру Вашего сайта за разъяснениями, это самый надёжный способ узнать причину неточной интерпретации свойств CSS3.
    Предоставьте им первоначальный код кнопки, не исключено что они сами изменят его до актуального состояния.

    0   Спам
    13 moty   (24.05.2013 17:39)
    Аватар moty Ты уж извини но не работает.

    0   Спам
    12 moty   (24.05.2013 05:31)
    Аватар moty Вот что получилось http://ya.myfanpost.ru/

    0   Спам
    11 moty   (23.05.2013 05:03)
    Аватар moty Спасибо это понятно. А есть какое то решение?

    0   Спам
    9 moty   (22.05.2013 20:33)
    Аватар moty Всем привет а эта кнопка только для укоз? Просто пытался поставить на другой платформе получился полный сыр бор! вот http://ya.myfanpost.ru/

    0   Спам
    10 IZOTOP   (23.05.2013 00:36)
    Аватар IZOTOP Привет!
    Эта кнопка не только для uCoz, она будет работать в любом поле поддерживающим HTML без ограничений.В случае с Вашим сайтом неадекватная работа кнопки это наследование условий которые созданы для формы в которую помещён код.

    0   Спам
    8 LoaderClan   (07.04.2013 03:17)
    Аватар LoaderClan Спасибо большое! =)

    0   Спам
    6 IZOTOP   (30.01.2013 06:32)
    Аватар IZOTOP Наверно имеется в виду их горизонтальное построение?
    Для этого легче всего вставить кнопки в ячейки таблицы с горизонтальным построением вот так

    Код
    <table border="0" style="margin:0;width:auto;height:130px;">
    <tr>
    <td>
    <div style="margin:0;border:0;padding:0;width:200px;height:130px;display:block;">
    Здесь кнопка
    </div>
    </td>
    <td>
    <div style="margin:0;border:0;padding:0;width:200px;height:130px;display:block;">
    Здесь кнопка
    </div>
    </td>
    <td>
    <div style="margin:0;border:0;padding:0;width:200px;height:130px;display:block;">
    Здесь кнопка
    </div>
    </td>
    <td>
    <div style="margin:0;border:0;padding:0;width:200px;height:130px;display:block;">
    Здесь кнопка
    </div>
    </td>
    </tr>
    </table>

    Теперь остаётся шевельнуть саму таблицу с кнопками в любом направлении тем,же свойством margin.
    Это самый простой способ,без (извращений) cool

    0   Спам
    7 klblkoff   (30.01.2013 18:05)
    Аватар klblkoff привет. вот спасибо. удружил. biggrin

    0   Спам
    4 IZOTOP   (29.01.2013 21:29)
    Аватар IZOTOP klblkoff

    Нормально что получилось.
    Наши люди методом тыка в космос корабли отправляют и те летают smile

    0   Спам
    5 klblkoff   (29.01.2013 21:41)
    Аватар klblkoff а в шапку в вряд четыре штуки получится поставить методом научного тыка?

    0   Спам
    2 IZOTOP   (29.01.2013 05:58)
    Аватар IZOTOP klblkoff  Привет!

    Такую кнопку можно устанавливать в любом месте.Для неё желательно создать отдельный блок в котором она будет находиться,а уже положение блока в котором будет кнопка регулировать по обстоятельствам.
    Вот как может выглядеть такой блок

    Код
    <div style="margin:0;border:0;padding:0;width:200px;height:130px;display:block;">
    Здесь кнопка
    </div>

    Чтобы сильно не загружаться можно использовать для регулировки только свойство margin.
    В блоке применена короткая запись с указанием внешнего отступа для всех 4 сторон и она равна нулю.
    Но можно применить значения для всех сторон вписав их в свойство,вот пример написания

    margin:0px auto 0px auto;

    Значения прописываются через пробел,вот последовательность в обозначении

    1.Первое значение =0px это отступ от верхней части.

    2.Второе значение =auto это отступ от правой части

    3.Третье значение =0px это отступ с низу

    4.Четвёртое =auto это отступ с лева

    Вот и смотри по обстоятельствам как действовать.
    Например если нужно отодвинуть блок в право,тогда указываешь 4 значению например 100px вместо 0px,и блок отодвинется от левого края на сто пикселей.
    ----------
    Не буду скрывать что для установки подобных элементов требуется хоть немного понимать свойства позиционирования,но методом тыка тоже можно добиться желаемого результата wink

    0   Спам
    3 klblkoff   (29.01.2013 20:17)
    Аватар klblkoff привет. срасибо получилось. на тестовой странице погонял кнопку по всей площади.

    0   Спам
    1 klblkoff   (29.01.2013 00:12)
    Аватар klblkoff а как её правильно поставить?


    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]