• Страница 1 из 2
  • 1
  • 2
  • »
Форум » Территория вебмастера » Начинающему вебмастеру » Кнопки для сайта с hover эффектом на CSS3 (Создайте уникальные эффекты зависания кнопок при CSS3)
Кнопки для сайта с hover эффектом на CSS3
Kosten
Дата: Воскресенье, 27.05.2018, 18:38 | Сообщение 1
Администраторы
Сообщений:17645
Награды: 55


В поисках красивой или элегантной конки, что создана на CSS, со стильным hover эффектом, то в этой колонке их полная подборка, где вы можете найти под свой дизайн, что тем обновите свой интернет ресурс. Если разобраться, то думаю спорить не станет, что кнопка, это обязательный элемент для любого тематического интернет ресурса. При помощи технологии CSS вы можете создавать оригинальные и красивые кнопки под любой дизайн, где стилистика будет уникальной с аналогичным эффектом.

Если решили создать несколько уникальных кнопок с уникальными эффектами зависания, то здесь как не крути, то нужно потратить некоторое время на это. Но если у вас нет времени для создания оригинальных, но главное собственных кнопок, то некоторые альтернативные способы вы можете попробовать. Так как для этого вы можете выбрать один из многих элементов и выставить по умолчанию, но также отредактировать, а это смена оттенка или изменить основной эффект.



При установках кнопки, что идет с оригинальным дизайн, то безусловно сразу смотрится оригинально, где такие веб сайты действительно великолепны, чтобы посещать их не один раз, все же зависит от первого впечатление. Если вам нужно реализовать некоторые красивые и уникальные эффекты зависания кнопок в вашем дизайне, то можно все реализовать.

Так как можно выставить свои собственные эффекты наведения курсора или используете другие эффекты. Вот как раз здесь предоставлено несколько лучших эффектов зависания кнопки css3, где также будут и разнообразные эффекты, которые сделают ваш дизайн красивым и оригинальным, что будет отличиться от других по схожей тематической площадке.

PS - если есть у кого свои идей или красивая кнопка с анимацией, то плиз делимся.
Прикрепления: 1757342.jpg(36.6 Kb)
Страна: (RU)
Kosten
Дата: Воскресенье, 27.05.2018, 19:02 | Сообщение 2
Администраторы
Сообщений:17645
Награды: 55


Красивая по своему эффекту, где он происходит при наведение. Здесь нет смены оттенка, а идет красивый прогиб, так как вы реально нажали. Также присутствует градиентные фоновые оттенки для эффектов к переходу на hover, что все реализовано при помощи HTML и CSS3. Попробуйте демонстрацию и посмотрите положение фокуса фона, перемещающегося с одной стороны на другую. Полная поддержка, включая шаблоны градиента CSS3, где все корректно выводит.



Кнопка с градиентом, где идет первый эффект при наведение, второй при клике на переход, вообщем под функцию.

HTML

Код
<a href="#" class="kidsazum_tegam detukilam_rovtes">ZORNET.RU</a>


CSS

Код
.kidsazum_tegam {
    position: relative;
    width:219px;
    height:39px;
    text-align:center;
    color:#FFF;
    text-decoration:none;
    line-height:43px;
    font-family:'Oswald', Helvetica;
    display: block;
    margin: 30px 0;
}
.kidsazum_tegam:before {
    background:#f0f0f0;
    background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#D0D0D0), to(#f0f0f0));
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;  
    -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;
    -moz-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;
    box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;
    position: absolute;
    content: "";
    left: -6px; right: -6px;
    top: -6px; bottom: -10px;
    z-index: -1;
}
.kidsazum_tegam:active {
    -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset;
    top:5px;
}
.kidsazum_tegam:active:before{
    top: -11px;
    bottom: -5px;
    content: "";
}
.detukilam_rovtes {
    text-shadow:-1px -1px 0 #A84155;
    background: #D25068;
    text-transform: uppercase;
    border:1px solid #D25068;
    background-image:-webkit-linear-gradient(top, #F66C7B, #D25068);
    background-image:-moz-linear-gradient(top, #F66C7B, #D25068);
    background-image:-ms-linear-gradient(top, #F66C7B, #D25068);
    background-image:-o-linear-gradient(top, #F66C7B, #D25068);
    background-image:linear-gradient(to bottom, #F66C7B, #D25068);
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;  
    -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #a24558, 0 4px 2px rgba(0, 0, 0, .5);
    -moz-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #a24558, 0 4px 2px rgba(0, 0, 0, .5);
    box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #a24558, 0 4px 2px rgba(0, 0, 0, .5);
}
.detukilam_rovtes:hover {
    background: #f76474;
    color: #f9f4f5;
    background-image:-webkit-linear-gradient(top, #bf4e63, #f16877);
    background-image:-moz-linear-gradient(top, #bf4e63, #f16877);
    background-image:-ms-linear-gradient(top, #bf4e63, #f16877);
    background-image:-o-linear-gradient(top, #bf4e63, #f16877);
    background-image:linear-gradient(top, #bf4e63, #f16877);
}


Демонстрация

Особенности

1. Масштабируемость - кнопки, используя размер шрифта.
2. Регулируемость - изменение заполнения и размера шрифта, и вы идете.
3. Гибкость - применить стили к любым элементам HTML.
4. Рельефные стили - изящная деградация для других браузеров.
5. Юзабилити - доступны нормальные, зависающие и активные состояние.

Кнопки, где присутствует оригинальный эффект, что позволяет вам добавить функциональную кнопку на вашем сайте с удивительным фоном градиента. Это привлечет внимание наших посетителей, поэтому они обязательно запомнят ваш сайт.
Прикрепления: 0367568.png(30.2 Kb)
Страна: (RU)
Kosten
Дата: Воскресенье, 27.05.2018, 20:10 | Сообщение 3
Администраторы
Сообщений:17645
Награды: 55


В современное время веб-дизайнерам можно полагать, что Photoshop для создания уникальных по стилистике кнопок, больше эта программа не пригодится. Здесь предоставлена небольшая, но оригинальная коллекция эффектов на каждый элемент кнопки, что идет под своей палитрой цвета и под разнообразные функций, что можно установить на сайте. Также зависящих от CSS3, которые можно задействовать на переход на другую страницу или на открытие отличной картинки.

Не сложно вписать собственные элементы, модифицировать или просто применять как вам нравится. Этот набор разных по своему оттенку кнопок, которые в создание чистой стилистике. Самостоятельно можете легко переделать любую из этих кнопок, а это выставить палитру цвета и свою ширину и высоту кнопки.

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

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

Смотрим значание, что написано на кнопки, чтоб быстро можно выбрать тот или иной эффект, так как стилистика у них эдентична, только снамация разнообразная, которая больше под темный фон подойдет, но все можно настроить в CSS, где на светлом отлично смотрится будут на любом тематичческом сайте.

1.



2.



3.



4.



Переходим к установке:

HTML



CSS


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

Демонстрация
Прикрепления: 4476317.png(10.0 Kb) · 0273629.png(8.5 Kb) · 0386671.png(10.2 Kb) · 6437600.jpg(20.7 Kb)
Страна: (RU)
Kosten
Дата: Воскресенье, 27.05.2018, 20:49 | Сообщение 4
Администраторы
Сообщений:17645
Награды: 55


Маркетинг изменился много за последние несколько лет. Что теперь зайдя на сайт, вам нужно сделать так, чтоб гости или пользователи сразу заметили вашу функцию. И здесь предлагаем отличное приложение, как кнопки на переход той или иной информации. Сами кнопки, это только название, остальное все анимация, что на светлом или на темном фоне отлично смотрятся, но главное, это сразу бросаются в глаза.

Безусловно они тематические, можно так их определить, так как на софт портале они просто не нужны. А если берем интернет магазин, так это почти реклама, что нужно для таких порталов.

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

Если вы потратили много времени на поиск способов повышения ваших коэффициентов конверсии, вы, вероятно, заметили, что большинство компаний используют ту же самую долю фраз, чтобы побуждать пользователей к действию.

Здесь рассмотрим все кнопки, что будут на светлом фоне.



Приступаем к установке:

HTML

Код
<a href="#" class="kiresazornet vtedsazikos">САЙТ ZORNET.RU #1</a>
<a href="#" class="kiresazornet latipersan">САЙТ ZORNET.RU #2</a>
<a href="#" class="kiresazornet">САЙТ ZORNET.RU #3</a>
<a href="#" class="kiresazornet gtukolas">САЙТ ZORNET.RU #4</a>


CSS

Код
html, body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}

a {
    display: block;
    margin: auto;
    margin-top: 50px;
    text-decoration: none;
    color: inherit;
}

@keyframes linear {
    
    from {
  background-position: 0 0;
    }
    to {
  background-position: 200px 0;
    }
    
}

@keyframes radial {
    
    from {
  background-position: 0 0;
    }
    to {
  background-position: 0 60px;
    }
    
}

@keyframes repeating {
    
    from {
  background-position: 0 0;
    }
    to {
  background-position: 0 85px;
    }
    
}

@keyframes electronic {
    
    0%, 100% {
  background-position: 20px -30px;
    }
    25% {
  background-position: 150px 5px;
    }
    50% {
  background-position: 20px 40px;
    }
    75% {
  background-position: -100px 5px;
    }
    
}

.kiresazornet {
    width: 197px;
    padding: 19px;
    text-align: center;
    position: relative;
    background: #f9f5f5;
    color: #252424;
    font: 13px open, tahoma;
}
.kiresazornet:before {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    border-radius: 3px;
    transform: scale( 1.02, 1.08 );
    position: absolute;
    background: #f00;
    background: linear-gradient( 90deg, #f5eded, #f5eded, #1D8EF7, #f5eded, #f5eded );
    background-position: 55px 0;
    top: 0;
    animation: linear 1s infinite linear;
    left: 0;
    z-index: -1;
}

.kiresazornet.gtukolas:before {
    background: radial-gradient( #fafafa, #f5eded, #F2A61A, #f5eded, #f5eded );
    animation: radial 1s infinite linear;
}

.kiresazornet.latipersan:before {
    background: repeating-linear-gradient( -45deg, #f5eded, #f5eded 30px, #5FC914 30px, #5FC914 60px ) fixed;
    animation: repeating 1s infinite linear;
}

.kiresazornet.vtedsazikos:before {
    background: radial-gradient( #d41c7e, #d41c7e, #d41c7e, #d41c7e, #f5eded, #f5eded ) no-repeat;
    background-size: 150px 50px;
    animation: electronic 2s infinite linear;
}


Это неотъемлемая часть копирайтинга, что не всегда привлекает внимание, которого она заслуживает. Это одна из областей написания, где люди становятся ленивыми, даже после того, как они потратили часы на создание сильных кампаний.

Демонстрация
Прикрепления: 8134078.png(10.9 Kb)
Страна: (RU)
Kosten
Дата: Воскресенье, 27.05.2018, 21:09 | Сообщение 5
Администраторы
Сообщений:17645
Награды: 55


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

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

Кнопка с анимацией загрузки



HTML

Код
<a href="http://zornet.ru" class="drahtuk_ilavun">Кнопка с анимацией загрузки</a>


CSS

Код
a.drahtuk_ilavun{
color:#349ebd;
padding: 17px 19px;
text-transform: uppercase;
width:350px;
text-decoration:none;
text-align:center;
margin:30px 0;
display: block;
background-image: linear-gradient(to left,transparent,transparent 50%,#0f96bd 50%,#0f96bd);
background-position: 100% 0;
background-size: 200% 100%;
transition: all .25s ease-in;
font: 400 18px tahoma;
border: 1px solid #0aa4d0;
}
a.drahtuk_ilavun:hover {
background-position: 0 0;
color:#f9f9fb;
}


У кнопки простой и общий принципы дизайна, который может значительно уйти от оптимизации дизайна ваших кнопок и другого интерфейса в целом.

Демонстрация
Прикрепления: 2076366.jpg(22.1 Kb)
Страна: (RU)
Slavik
Дата: Воскресенье, 27.05.2018, 23:59 | Сообщение 6
Гл. Модератор
Сообщений:1750
Награды: 4


Не дурно!, всегда пригодиться 11a 09a

MIR-HACK.RU - Добро пожаловать в мир читов!
Страна: (RU)
Kosten
Дата: Вторник, 29.05.2018, 00:52 | Сообщение 7
Администраторы
Сообщений:17645
Награды: 55


Отличное решение для кнопки, которая по умолчанию скрывает знаки, где при наведении она полностью раскрывается. Что этот шаг назад из расширенных обсуждений о препроцессорах CSS. Мы разработаем четыре супер простых CSS кнопки, которая имеет оригинальный и анимированный эффект провисание. Также не стесняйтесь захватить мой код и использовать его в своих проектах.

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

Я начал с базового 15-кратного радиуса, чтобы дать нам несколько хороших закругленных углов, а затем добавил небольшое наложение градиента. Градиент начинается с прозрачного и исчезает до черного. Это небольшой трюк, что использую для применения градиента быстрого затемнения, который работает практически с любым фоновым цветом.

Анимация CSS

Теперь пришло время настроить наш переход CSS. Это довольно просто, самая неприятная вещь заключается в том, что, как и выше, мы должны повторять это так много раз! Здесь я настроил анимацию на все изменения, продолжительность до половины секунды и функцию синхронизации для облегчения.

Так реально выглядит, как по умолчанию, и при наведение курсора.



Приступаем к установке:

HTML

Для экспериментов я просто использую простую ссылку и стилю ее как элемент блока.

Код
<a href="http://zornet.ru" id="zotsaxtunim_sagertan" class="zotsaxtunim_sagertan">Подписаться - на zornet.ru</a>


CSS

Для начала нам просто нужно дать нашей кнопке базовую форму и цвет. Здесь я установил высоту 28px и ширину до 117px, добавил некоторые поля и дополнение, и дал кнопке небольшую границу.

Код
#zotsaxtunim_sagertan {
    background: #2865a2;
    text-shadow: 0 1px 0 #232020;
    border: 1px solid #e2e2e2;
    height: 29px;
    width: 117px;
    margin: 78px 0 0 51px;
    padding: 0 0 0 9px;
    overflow: hidden;
    display: block;
    -webkit-transition: All 0.5s cubic-bezier(0.25, 0.1, 0.18, 0.93);
    -moz-transition: All 0.5s ease;
    -o-transition: All 0.5s ease;
    -ms-transition: All 0.5s ease;
    transition: All 0.5s cubic-bezier(0.25, 0.1, 0.19, 0.95);
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
}

#zotsaxtunim_sagertan:hover {
  width: 241px;
}


Радиус выставлен на 15, чтобы дать нам несколько хороших закругленных углов, а затем добавил небольшое наложение градиента. Градиент начинается с прозрачного и исчезает до черного. Это небольшой трюк, где использую для применения градиента быстрого затемнения, который работает практически с любым фоновым цветом.

Демонстрация
Прикрепления: 2936388.jpg(9.3 Kb)
Страна: (RU)
Kosten
Дата: Вторник, 29.05.2018, 01:16 | Сообщение 8
Администраторы
Сообщений:17645
Награды: 55


Еще одна кнопка, которая полностью по стилистике выполнена на CSS, это дизайн и оттенок цвета, даже есть элементы 3D, что можно наблюдать в самом низу, где выставлено на несколько пикселей. Это самая простая из всех анимации кнопок CSS, что веб мастер может производить свои изменение и сделать ее для своего стиля оригинальнее.

Что здесь происходит, так это то, что у вас есть фоновый цвет, который изменяется при зависании, но мы используем переход, подобный описанному выше, постепенно смещение цвета, а немедленное изменение.

По умолчанию установлен небольшой радиус границы, который прошел вокруг, применил аналогичный градиент фона и добавил дополнительный элемент теневой коробки. Используя rgba с тенью, где установлен черный цвет, а затем уменьшена прозрачность

Изначально в алом оттенке шла палитра, но здесь можно под свой стиль все выставить, как пример, поставил сению палитру оттенка.



Приступаем к установке:

HTML

Код
<a href="http://zornet.ru" id="aloesanu-hdajeg" class="buttonText">ZORNET.RU №1</a>


CSS

Код
#aloesanu-hdajeg {
    background: #1782d1;
    color: #f5f0f0;
    border: 2px solid #f9f2f2;
    height: 41px;
    width: 132px;
    margin: 83px 0 0 75px;
    overflow: hidden;
    display: block;
    text-align: center;
    line-height: 37px;
    -webkit-transition: All 0.5s cubic-bezier(0.25, 0.1, 0.19, 0.91);
    -moz-transition: All 0.5s ease;
    -o-transition: All 0.5s ease;
    -ms-transition: All 0.5s ease;
    transition: All 0.5s cubic-bezier(0.25, 0.1, 0.18, 0.96);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background-image: -webkit-linear-gradient(top, rgba(16, 16, 16, 0), rgba(21, 20, 20, 0.2));
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    -webkit-box-shadow: 0px 3px 1px rgba(21, 20, 20, 0.2);
    -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 3px 1px rgba(25, 24, 24, 0.2);
}

#aloesanu-hdajeg:hover {
    background-color: #2fa2e2;
}


Hover CSS

Чтобы закончить, просто примените другой цвет фона при наведении. Попробуйте выбрать немного более яркий вариант цвета в Photoshop, чтобы переход выглядел красиво.

Основной CSS

CSS очень похож на последний раз с несколькими заметными изменениями. Я добавил в другой цвет фона и немного изменил форму. Я также выравнивал текст по центру и устанавливал высоту линии по вертикальной высоте кнопки, чтобы центрировать была возможность самостоятельно.

Демонстрация
Прикрепления: 3060192.jpg(17.5 Kb)
Страна: (RU)
Kosten
Дата: Вторник, 29.05.2018, 19:43 | Сообщение 9
Администраторы
Сообщений:17645
Награды: 55


Просто оригинальная кнопка, что имеет свой уникальный эффект, который происходит при наведении. А это не как у всех, где просто идет другой оттенок цвета. Здесь все на анимации, где подключена стилистика. А будет так, вы наводите, и в кнопке, внутри ее вписана ссылка на изображение, что начинает съезжать в низ, но название, что прописано на ней остается на месте. Где визуально просто смотрится красиво, что главное отличается от остальных.

Что по установке, то все делаем по стандарту, нужно изначально найти место под код. Который идет с заданным под стили id, где ставим и в CSS вписываем стили. Здесь сам инструмент для анимации с открытым исходным кодом, что можно самостоятельно внести свои коррективы под свою стилистику на сайте, чтоб элемент отлично вписался, где позволяет приложениям использовать анимацию так же легко, как и статические изображения.



Кнопка с оригинальной анимацией на HTML и CSS

HTML

Код
<a href="http://zornet.ru" id="vesetukieng">ZORNET.RU</a>


CSS

Код
#vesetukieng {
    background: #af1212 url(http://zornet.ru/ABVUN/sarunolas/bkg-1.jpg);
    background-position: 0 0;
    color: #f5efef;
    text-shadow: 0px 2px 0px rgba(19, 18, 18, 0.43);
    font-size: 23px;
    height: 61px;
    width: 168px;
    margin: 37px 0 0 48px;
    overflow: hidden;
    display: block;
    text-align: center;
    line-height: 56px;
    -webkit-transition: All 0.8s cubic-bezier(0.25, 0.1, 0.19, 0.96);
    -moz-transition: All 0.8s ease;
    -o-transition: All 0.8s ease;
    -ms-transition: All 0.8s ease;
    transition: All 0.8s cubic-bezier(0.25, 0.1, 0.23, 0.95);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0px 3px 1px rgba(21, 19, 19, 0.27);
    -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 3px 1px rgba(14, 14, 14, 0.26);
}

#vesetukieng:hover {
  background-position: 0px 148px;
}


Этот фрагмент кода квадратов обновляет ваши кнопочные блоки при помощи простой анимации и предназначен для кнопок с контуром стилей

Демонстрация
Прикрепления: 1980163.png(12.9 Kb)
Страна: (RU)
Kosten
Дата: Вторник, 29.05.2018, 23:48 | Сообщение 10
Администраторы
Сообщений:17645
Награды: 55


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

Также некоторые кнопки CSS3 для использования на разноплановых проектах веб сайта. Некоторые кнопки здесь используют jQuery, но здесь только используем стили CSS. Самый классический пример анимации CSS, это наведение кнопки. В своем CSS вы можете настроить маркетинг своей индивидуальной кнопки, это поменять палитру цвета или изменить эффект, что все самостоятельно можно выстроить, как вы видите ее на своем сайте или странице.

Все проверено по работе способности и функциональности при установке.



Анимированная кнопка CSS3

HTML

Код
<a href="http://zornet.ru/load/81" id="viresaxkulonsa">ZORNET.RU</a>


CSS

Код
#viresaxkulonsa {
  background: #383535;
  color: #f9f5f5;
  text-shadow: 0px 2px 0px rgba(19, 18, 18, 0.34);
  font-size: 21px;
  height: 61px;
  width: 162px;
  margin: 47px 0 0 35px;
  overflow: hidden;
  display: block;
  text-align: center;
  line-height: 63px;
  
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  
  -webkit-box-shadow: 0px 6px 0px rgba(19, 18, 18, 0.73);
  -moz-box-shadow: 0px 6px 0px rgba(6, 6, 6, 0.82);
  box-shadow: 0px 6px 0px rgba(19, 18, 18, 0.83);
  
  background-image: -webkit-linear-gradient(top, rgba(12, 12, 12, 0), rgba(6, 6, 6, 0.23));
  background-image: -moz-linear-gradient(top, rgba(10, 10, 10, 0), rgba(0, 0, 0, 0.2));
  background-image: -o-linear-gradient(top, rgba(6, 6, 6, 0.03), rgba(6, 6, 6, 0.2));
  background-image: -ms-linear-gradient(top, rgba(6, 6, 6, 0.02), rgba(0, 0, 0, 0.2));
  background-image: linear-gradient(top, rgba(14, 14, 14, 0), rgba(4, 4, 4, 0.21));
}

#viresaxkulonsa:hover {
  margin-top: 55px;
  
  -webkit-box-shadow: 0px 4px 0px rgba(21, 20, 20, 0.87);
  -moz-box-shadow: 0px 4px 0px rgba(8, 8, 8, 0.84);
  box-shadow: 0px 4px 0px rgba(19, 18, 18, 0.82);
  
  background-image: -webkit-linear-gradient(bottom, rgba(14, 14, 14, 0.03), rgba(10, 10, 10, 0.45));
  background-image: -moz-linear-gradient(bottom, rgba(8, 8, 8, 0.04), rgba(16, 16, 16, 0.42));
  background-image: -o-linear-gradient(bottom, rgba(8, 8, 8, 0.05), rgba(8, 8, 8, 0.42));
  background-image: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
  background-image: linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
}


Чтобы создать анимацию кнопок, вам сначала нужно настроить свою кнопку в HTML.

Демонстрация

Вывод:

Прочитав этот краткий учебник, вы должны быть уверены в том, как реализовать базовые стили CSS3, чтобы кнопка выглядела красиво и привлекательно. У вас также должно быть хорошее понимание того, как работают CSS-переходы и что требуется, чтобы сделать их совместимыми с несколькими браузерами. Наконец, у вас должны быть какие-то потрясающие идеи для создания интересных эффектов зависания.
Прикрепления: 0800463.png(5.2 Kb)
Страна: (RU)
Kosten
Дата: Пятница, 01.06.2018, 00:34 | Сообщение 11
Администраторы
Сообщений:17645
Награды: 55


Вы можете создавать так много эффектов, просто реагируя на положение мыши. Это великолепно и очень весело играть при наведении клика. Здесь больше на темный фон эта анимация на кнопке подойдет. Но все очень просто перестроить в стилистике, где на светлом шикарно смотреться.

Есть простые, легкие, привлекательные кнопки и могут создавать любую веб страницу, для которой требуются кнопки вызова к действию. Это переходи со страницы на другую или выход с интернет ресурса, где много вариаций.

Ниже вы увидите один из многих примеров, а затем соответствующий код HTML и CSS, чтобы кнопки работали на вашем собственном сайте или целевой странице.



Анимированные кнопки наведения SVG

HTML

Код
  <div class="position">
    <div class="svg-wrapper">
      <svg height="40" width="149" xmlns="http://www.w3.org/2000/svg">
        <rect id="shape" height="40" width="149" />
        <div id="text">
          <a href=""><span class="spot"></span>ZORNET.RU 1</a>
        </div>
      </svg>
    </div>
    <!--Next button -->
    <div class="svg-wrapper">
      <svg height="40" width="149" xmlns="http://www.w3.org/2000/svg">
        <rect id="shape" height="40" width="149" />
        <div id="text">
          <a href=""><span class="spot"></span>ZORNET.RU 2</a>
        </div>
      </svg>
    </div>
    <!--Next button -->
    <div class="svg-wrapper">
      <svg height="40" width="149" xmlns="http://www.w3.org/2000/svg">
        <rect id="shape" height="40" width="149" />
        <div id="text">
          <a href=""><span class="spot"></span>ZORNET.RU 3</a>
        </div>
      </svg>
    </div>


CSS

Код
.position {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-top: 15%;
}

#workarea {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #1e1a3e;
  font-family: Raleway;
}

#personal {
  color:white;
  text-decoration:none;
  position:absolute;
  bottom:15px;
  right:2%;
}

.spot {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.svg-wrapper {
  margin-top: 0;
  position: relative;
  width: 150px;
  height: 40px;
  display: inline-block;
  border-radius: 3px;
  margin-left: 5px;
  margin-right: 5px
}

#shape {
  stroke-width: 6px;
  fill: transparent;
  stroke: #009FFD;
  stroke-dasharray: 85 400;
  stroke-dashoffset: -220;
  transition: 1s all ease;
}

#text {
  margin-top: -35px;
  text-align: center;
}

#text a {
    color: #4c4949;
    text-decoration: none;
    font-weight: 100;
    font-size: 1.1em;
}

.svg-wrapper:hover #shape {
  stroke-dasharray: 50 0;
  stroke-width: 3px;
  stroke-dashoffset: 0;
  stroke: #06D6A0;
}


Он имеет три анимационных эффекта, которые вы можете использовать на своих сайтах. Он очень прост в использовании и настраивает кнопки, где можете легко изменить стиль и размер шрифта, цвета и многое другое.

Демонстрация
Прикрепления: 2471574.png(3.5 Kb)
Страна: (RU)
Kosten
Дата: Четверг, 07.06.2018, 14:25 | Сообщение 12
Администраторы
Сообщений:17645
Награды: 55


Рассмотрим самый простой и доступный способ, как можно создать свою оригинальную кнопку при помощи стилистике на CSS. Здесь также будет присутствовать эффект, который автоматически срабатывает при наведение. А точнее будет меняться палитра цвета, та, которую вы самостоятельно выставите.



HTML

Код
  <a href="http://zornet.ru" class="kambinuzogtipsam" target="_blank">Скрипты</a>
  <br/>
  <a href="http://zornetm" class="kambinuzogtipsam">Шаблоны</a>
  <br/>
  <a href="http://zornurces.com" class="kambinuzogtipsam" target="_blank">Дизайн</a>


CSS

Код
.kambinuzogtipsam {
    color: #1f860d;
    background: #fbf7f7;
    border: 2px solid #0d9027;
    font-size: 17px;
    padding: 7px 12px;
    font-weight: normal;
    margin: 6px 0;
    margin-right: 12px;
    display: inline-block;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
    min-width: 120px;
}

.kambinuzogtipsam:hover, .kambinuzogtipsam:active {
  color:#f3efef;
  background:#0d9027;
}


Демонстрация
Прикрепления: 8453186.png(5.3 Kb)
Страна: (RU)
Kosten
Дата: Четверг, 07.06.2018, 15:35 | Сообщение 13
Администраторы
Сообщений:17645
Награды: 55


Сейчас мало кого удивить стилем на 3D кнопки, но все же они сильно отличаются от плоских, и на многих дизайн сайтов отлично смотрятся. Так как на них можно подключить эффект нажатие. Это когда пользователь делает клик, то кнопка визуально нажимается, что смотрится красиво и безусловно реально.

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



HTML

Код
<h1>3D CSS ZORNET.RU</h1>
<br>
<a href="#" class="tremisebkolas">ZORNET.RU</a>
<a href="#" class="tremisebkolas">ZORNET.RU</a><br>
<a href="Ссылка" target="_blank" class="tremisebkolas">3D Buttons</a>


CSS

Код
.tremisebkolas {
    position: relative;
    width: auto;
    display: inline-block;
    color: #f3f6f7;
    text-decoration: none;
    border-radius: 5px;
    border: solid 1px #12c2f3;
    background: #22c0e6;
    text-align: center;
    padding: 16px 18px 14px;
    margin: 12px;
    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s;
    transition: all 0.1s;
    -webkit-box-shadow: 0px 6px 0px #0098d3;
    -moz-box-shadow: 0px 6px 0px #d35400;
    box-shadow: 0px 6px 0px #0e7fb9;
}

.tremisebkolas:active{
    -webkit-box-shadow: 0px 2px 0px #0d91d2;
    -moz-box-shadow: 0px 2px 0px #0d91d2;
    box-shadow: 0px 2px 0px #0d91d2;
    position:relative;
    top:4px;
}


Демонстрация
Прикрепления: 5435156.jpg(14.8 Kb)
Страна: (RU)
Kosten
Дата: Четверг, 07.06.2018, 15:58 | Сообщение 14
Администраторы
Сообщений:17645
Награды: 55


Еще одна кнопка, где при наведении меняется оттенок цвета, но здесь стилистика изначально идет прозрачной, что этим она будет немного отличатся от других. В дизайне Web кнопки обычно размещаются поверх больших фоновых изображений или видеоматериалов.



HTML

Код
  <a href="Ссылка" class="sanudesa_ctumolka" target="_blank">ZORNET.RU</a>


CSS

Код
.sanudesa_ctumolka {
    color: #f5efef;
    border: 2px solid #fff9f9;
    border-radius: 3px;
    font-size: 18px;
    padding: 8px 14px;
    font-weight: normal;
    margin: 5px 0;
    margin-right: 12px;
    display: inline-block;
    text-decoration: none;
    min-width: 137px;
    font-weight: 400px;
    display: inline-block;
    -webkit-transition: background-color .5s linear;
    -moz-transition: background-color .5s linear;
    -ms-transition: background-color .5s linear;
    -o-transition: background-color .5s linear;
    transition: background-color .5s linear;
}

.sanudesa_ctumolka:hover, .sanudesa_ctumolka:active {
  color:#f8f8f9;
      background-color: rgba(12, 59, 72, 0.67);
  
}


PS - найдете много сайтов, использующих кнопки на больших фоновых изображениях на своих целевых страницах, где с помощью этого урока вы сможете сделать некоторые из своих собственных.

Демонстрация
Прикрепления: 4970929.png(11.6 Kb)
Страна: (RU)
Kosten
Дата: Четверг, 07.06.2018, 19:44 | Сообщение 15
Администраторы
Сообщений:17645
Награды: 55


Вот один из самых уникальных стилей, которые я видел, и это, безусловно, не распространено в Интернете. Эта плавающая кнопка, что по умолчанию идет анимация, которая и привлекает больше всего, не говоря о стилистике как она выполнена. Так как под кнопкой прописана тень, где также есть анимация, это когда кнопка поднимается, то тень меняется, что очень красиво и оригинально смотрится.

Разумеется этот эффект наведения немного тусклый, хотя сам дизайн кнопки более чем компенсирует это, хотя для этого идет CSS, где самостоятельно можете сделать яркой по стилю. Кроме того, вы всегда можете расширить эффект наведения, чтобы включить другие анимации CSS3, если вы готовы нажать на конверт.

Плавающая кнопка



HTML

Код
<div class="zornet_rulton">
  <a href="http://zornet.ru" class="rsakiopib">ZORNET.RU</a>
</div>


SCSS



Демонстрация
Прикрепления: 1855426.jpg(11.6 Kb)
Страна: (RU)
Форум » Территория вебмастера » Начинающему вебмастеру » Кнопки для сайта с hover эффектом на CSS3 (Создайте уникальные эффекты зависания кнопок при CSS3)
  • Страница 1 из 2
  • 1
  • 2
  • »
Поиск: