50 примеров css3 кнопок с эффектами и анимацией
Содержание:
- Группа кнопок «обоснованная/полная ширина»:
- Плавающая кнопка наверх для сайта
- How To Create a Button Group
- Вариант 4:
- 10 моментов, которые стоит учесть, создавая дизайн кнопок для сайта
- More
- Text Buttons with Individual Backgrounds
- Кернинг[править]
- Сдвиг фонового изображения
- Создание красивой кнопки для сайта
- More
- Текстовые кнопки с индивидуальным фоном
- 3D имитация нажатия кнопки
- Диагностика оперативной памяти и выявление ошибок
- Images
Группа кнопок «обоснованная/полная ширина»:
Пример
<!— Three buttons in a group —><div class=»btn-group» style=»width:100%»> <button
style=»width:33.3%»>Apple</button>
<button style=»width:33.3%»>Samsung</button> <button
style=»width:33.3%»>Sony</button></div><!—
Four buttons in a group —><div class=»btn-group» style=»width:100%»> <button
style=»width:25%»>Apple</button>
<button style=»width:25%»>Samsung</button> <button
style=»width:25%»>Sony</button> <button
style=»width:25%»>HTC</button></div>
Совет: Перейдите на наш CSS кнопки учебник, чтобы узнать больше о том, как стиль кнопок.
❮ Назад
Дальше ❯
Плавающая кнопка наверх для сайта
Итак, друзья, простую кнопку на HTML мы с вами сделали, теперь давайте займемся реализацией более продвинутой версии. В ней мы избавимся от тех недостатков, которые присутствовали в предыдущем варианте, а именно:
- Кнопка не будет постоянно маячить перед глазами, а появится только тогда, когда посетитель пролистает страницу вниз;
- Эффект возвращения наверх страницы будет плавным, что выглядит стильно;
- Кроме того, наша кнопка будет меняться при наведении курсора (менять цвет или яркость).
Существует масса способов и скриптов, позволяющих сделать кнопку вверх. Признаюсь честно, я не программист и, если в предыдущем варианте с HTML я разобрался, то в JavaScript я полный чайник. Поэтому я просмотрел и изучил кучу разных версий и выбрал для себя вариант, который проще всего реализовать (меньше изменений в разных файлах).
В целом, процесс создания такой кнопки чуть-чуть сложнее, но разобраться с ним может каждый. Делается все в 2 этапа:
1. Подключение библиотеки jQuery
Если вы используете WordPress или другую стандартную CMS, то эта библиотека, скорее всего, подключена по умолчанию. В таком случае, этот пункт вы можете пропустить.
Для подключения библиотеки jQuery, вам нужно прописать в разделе <head></head> вашего сайта следующую строку:
<script type="text/javascript" src="https://yastatic.net/jquery/2.1.3/jquery.min.js"></script>
2. Подключение скрипта, выводящего кнопку
Код скрипта можно вставить двумя способами:
- либо поместить его целиком между тегами <head></head>,
- либо разместив скрипт в отдельном фале, а в коде страницы прописать его подключение.
Первый вариант проще, второй, на мой взгляд, удобнее.
Вот сам скрипт (автор Тимур Камаев wp-kama.ru):
<script type="text/javascript">
jQuery(document).ready(function($){
$('<style>'+
'.scrollTop{ display:none; z-index:9999; position:fixed;'+
'bottom:20px; left:90%; width:88px; height:125px;'+
'background:url(https://biznessystem.ru/img/arrow.png) 0 0 no-repeat; }' +
'.scrollTop:hover{ background-position:0 -133px;}'
+'</style>').appendTo('body');
var
speed = 550,
$scrollTop = $('<a href="#" class="scrollTop">').appendTo('body');
$scrollTop.click(function(e){
e.preventDefault();
$( 'html:not(:animated),body:not(:animated)' ).animate({ scrollTop: 0}, speed );
});
//появление
function show_scrollTop(){
( $(window).scrollTop() > 330 ) ? $scrollTop.fadeIn(700) : $scrollTop.fadeOut(700);
}
$(window).scroll( function(){ show_scrollTop(); } );
show_scrollTop();
});
</script>
Замените в скрипте ссылку https://biznessystem.ru/img/arrow.png на ту, где будет храниться ваша картинка.
Если вы будете использовать для скрипта отдельный файл, как это сделал я, то в него помещаете код, находящийся между тегами <script></script>, сами теги копировать в файл не нужно. Файл размещаете у себя на хостинге.
Я назвал файл buttonup.js. Для его подключения в заголовке сайта прописываем вот такую строчку:
<script type="text/javascript" src="https://путь к файлу/buttonup.js">
Вместо «путь к файлу» прописываете адрес, где лежит ваш файл со скриптом.
Картинка для кнопки
Для того, чтобы изображение кнопки менялось, файл картинки должен состоять из двух половинок, на одной изображается обычная стрелка, на другой активная стрелка (под наведенным курсором). Посетителю одновременно показывается только одна половина. У меня верхняя стрелка сделана полупрозрачной, вторая непрозрачная (яркая).
Заданные цифры приведены для картинки размером 88 на 250 пикселей (каждая стрелка сделана по 125 пикселей в высоту). Если вы будете использовать другое изображение, то изменяете в коде значения width и height на свои.
Значение background-position – это смещение картинки, его делаете чуть больше половины всей высоты изображения.
Bottom – это отступ от нижнего края экрана. Left – отступ от левого края экрана, здесь он задан в процентах, а можно задать в пикселях, как это было в примере с HTML. Там параметр right (отступ справа) был задан в пикселях.
Код можно упростить, если удалить из него вот эту строку:
+ '.scrollTop:hover{ background-position:0 -133px;}'
Она отвечает за изменение отображаемой части картинки при наведении курсора и если ее убрать, то кнопка всегда будет выглядеть одинаково. В этом случае вам не нужна будет картинка с двойным изображением, поставьте любую стрелку.
Несколько вариантов стрелок я сделал, а в интернете вы можете отыскать много готовых.
Как видите, создать красивый сайт самому несложно. На этом на сегодня все.
How To Create a Button Group
Step 1) Add HTML:
<div class=»btn-group»> <button>Apple</button>
<button>Samsung</button> <button>Sony</button></div>
Step 2) Add CSS:
.btn-group button { background-color: #4CAF50; /* Green
background */ border: 1px solid green; /* Green border
*/ color: white; /* White text */ padding: 10px
24px; /* Some padding */ cursor: pointer; /*
Pointer/hand icon */ float: left; /* Float the
buttons side by side */}.btn-group button:not(:last-child) { border-right: none; /* Prevent double borders */}/* Clear floats (clearfix hack) */.btn-group:after {
content: «»; clear: both; display:
table;}/* Add a background color on hover */.btn-group button:hover { background-color: #3e8e41;}
Вариант 4:
Кнопка button
.atuin-btn {
display: inline-flex;
margin: 10px;
text-decoration: none;
position: relative;
font-size: 20px;
line-height: 20px;
padding: 12px 30px;
color: #FFF;
font-weight: bold;
text-transform: uppercase;
font-family: ‘Roboto Condensed’, Тahoma, sans-serif;
background: #337AB7;
cursor: pointer;
border: 2px solid #BFE2FF;
}
.atuin-btn:hover,
.atuin-btn:active,
.atuin-btn:focus {
color: #FFF;
}
.atuin-btn:before,
.atuin-btn:after {
content: «»;
border: 4px solid transparent;
position: absolute;
width: 0;
height: 0;
box-sizing: content-box;
}
.atuin-btn:before {
top: -6px;
left: -6px;
}
.atuin-btn:after {
bottom: -6px;
right: -6px;
}
.atuin-btn:hover:before,
.atuin-btn:active:before,
.atuin-btn:focus:before {
width: calc(100% + 4px);
height: calc(100% + 4px);
border-top-color: #337AB7;
border-right-color: #337AB7;
transition: width 0.2s ease-out, height 0.2s ease-out 0.2s;
}
.atuin-btn:hover:after,
.atuin-btn:active:after,
.atuin-btn:focus:after {
width: calc(100% + 4px);
height: calc(100% + 4px);
border-bottom-color: #337AB7;
border-left-color: #337AB7;
transition: border-color 0s ease-out 0.4s, width 0.2s ease-out 0.4s, height 0.2s ease-out 0.6s;
}
|
1 |
.atuin-btn { displayinline-flex; margin10px; text-decorationnone; positionrelative; font-size20px; line-height20px; padding12px30px; color#FFF; font-weightbold; text-transformuppercase; font-family’Roboto Condensed’,Тahoma,sans-serif; background#337AB7; cursorpointer; border2pxsolid#BFE2FF; } .atuin-btn:focus { color#FFF; } .atuin-btn:after { content»»; border4pxsolidtransparent; positionabsolute; width; height; box-sizingcontent-box; } .atuin-btn:before { top-6px; left-6px; } .atuin-btn:after { bottom-6px; right-6px; } .atuin-btn:focus:before { widthcalc(100%+4px); heightcalc(100%+4px); border-top-color#337AB7; border-right-color#337AB7; transitionwidth0.2sease-out,height0.2sease-out0.2s; } .atuin-btn:focus:after { widthcalc(100%+4px); heightcalc(100%+4px); border-bottom-color#337AB7; border-left-color#337AB7; transitionborder-color0sease-out0.4s,width0.2sease-out0.4s,height0.2sease-out0.6s; } |
10 моментов, которые стоит учесть, создавая дизайн кнопок для сайта
Помните, что порядок размещения и положение кнопок – очень важные параметры. Особенно важен порядок применительно к парным кнопкам (к примеру, «предыдущий» и «следующий»)
Главный акцент в дизайне должен быть сделан на основном или наиболее важном действии юзера.
Кнопки должны соответствовать контексту.
Дизайн кнопок на сайте должен соответствовать бренду. То есть, вы можете использовать логотип при разработке дизайна, а также продуманно выбирать цветовую гамму и графическое оформление.
При использовании в интерфейсе преимущественно плоских цветов не стоит создавать дизайн больших блестящих кнопок для сайта в стиле Apple. Создавая интерфейс, применяйте дизайн логотипа, пользуйтесь соответствующими формами, цветами и другими видами украшений.
Скрывайте второстепенные элементы.
Помните, что детали, имеющие второстепенное значение, не должны бросаться в глаза. Речь в данном случае идет об элементах меню, контроллерах, различных бегунках. Эти элементы, в частности, могут иметь одинаковые углы (один радиус), но разные тени, границы и градиенты и т. д.
Аккуратно используйте размытые тени.
Создавая дизайн кнопок для сайта, многие веб-мастера применяют в работе «Закон Теней», согласно которому любые тени оказывают лучший эффект, когда элемент светлее фона
Если же элемент темнее, чем фон, тени следует использовать осторожно.. Не забывайте о первичных, вторичных и третичных элементах
Не забывайте о первичных, вторичных и третичных элементах.
При создании интерфейса, имеющего множество разных функций, необходимо установить некий визуальный язык для определения первичного, вторичного и третичного стилей.
Также не следует забывать, что размер кнопки, пустого пространства, текста и уровня тиснения должен уменьшаться. Это необходимо, чтобы снижался визуальный вес кнопок.
Остерегайтесь призрачных кнопок.
Дизайн призрачных кнопок для сайта включает в себя подпись, одноцветную рамку и прозрачный фон. Из-за этого могут возникать проблемы с подписью. В некоторых случаях лейбл помещают на фон белого цвета – это самый простой вариант. Но зачастую из-за другого сплошного цвета или яркого фото текст кнопки может стать нечитабельным.
Дизайнеры любят призрачные кнопки за то, что они полностью противоположны стандартным. Их не зря именуют призрачными, поскольку кнопки такого рода способны исчезать. Результаты проведенных исследований по юзабилити показали, что такие кнопки действительно могут пропадать. Люди, участвовавшие в экспериментах, не могли или прочесть текст, или их видеть. Из-за этого кнопка становится менее значимой или совсем теряет свою значимость.
Не используйте текст в виде «ОК».
Разрабатывая дизайн кнопок для сайта, мастера часто применяют надписи «OK», «Cancel», «Да», «Нет» и т.п. Если вы – пользователь ПК, то видите такие кнопки ежедневно. Но такого рода кнопки не имеют никакого отношения к действию, совершаемому пользователем. CТА для ясности и убедительности следует увязывать с действием, которое юзер хочет или собирается выполнить.
Лучшее место для расположения конверсионных кнопок – правая нижняя часть страницы.
Чтобы аргументировать это утверждение, демонстрируем вам диаграмму Гутенберга. Глядя на нее, вы понимаете, что страница сайта делится на 4 части. Стрелки показывают, как двигается пользователь
Основное его внимание сосредоточено на верхнем левом и правом нижнем квадрантах страницы. На нижний левый квадрант посетитель практически не смотрит
В связи с этим конверсионные кнопки всегда лучше располагать внизу справа.
Кнопку желаемого действия в диалоговых окнах лучше помещать в правой части.
Кнопки желаемого действия, например «Купить», «Оформить» и т. д. лучше располагать в правой части, поскольку там они работают более эффективно. Взгляните на этот скриншот:
Если кнопка желаемого действия располагается в левой части, посетитель в первую очередь обращает внимание на нее, но не спешит нажимать до тех пор, пока не ознакомится со всеми доступными опциями. Пользователь смотрит на кнопку желаемого действия, после чего переключает взгляд на альтернативную кнопку
Чтобы юзер остановил свой выбор на варианте «Да», то должен вернутся к этой кнопке после изучения других вариантов.
Если кнопка желаемого действия располагается в правой части, пользователь сначала выбирает второстепенную опцию, после чего вновь переходит к необходимой вам.
Если вы разработали высококлассный, на ваш взгляд, дизайн кнопок для сайта, но положительной динамики нет, воспользуйтесь услугами профессионалов. Специалисты создадут качественный дизайн кнопок для сайта и помогут вам достичь высокой конверсии.
Оставить заявку
More
Fullscreen VideoModal BoxesDelete ModalTimelineScroll IndicatorProgress BarsSkill BarRange SlidersTooltipsDisplay Element HoverPopupsCollapsibleCalendarHTML IncludesTo Do ListLoadersStar RatingUser RatingOverlay EffectContact ChipsCardsFlip CardProfile CardProduct CardAlertsCalloutNotesLabelsCirclesStyle HRCouponList GroupList Without BulletsResponsive TextCutout TextGlowing TextFixed FooterSticky ElementEqual HeightClearfixResponsive FloatsSnackbarFullscreen WindowScroll DrawingSmooth ScrollGradient Bg ScrollSticky HeaderShrink Header on ScrollPricing TableParallaxAspect RatioResponsive IframesToggle Like/DislikeToggle Hide/ShowToggle Dark ModeToggle TextToggle ClassAdd ClassRemove ClassActive ClassTree ViewRemove PropertyOffline DetectionFind Hidden ElementRedirect WebpageZoom HoverFlip BoxCenter VerticallyCenter Button in DIVTransition on HoverArrowsShapesDownload LinkFull Height ElementBrowser WindowCustom ScrollbarHide ScrollbarShow/Force ScrollbarDevice LookContenteditable BorderPlaceholder ColorText Selection ColorBullet ColorVertical LineDividersAnimate IconsCountdown TimerTypewriterComing Soon PageChat MessagesPopup Chat WindowSplit ScreenTestimonialsSection CounterQuotes SlideshowClosable List ItemsTypical Device BreakpointsDraggable HTML ElementJS Media QueriesSyntax HighlighterJS AnimationsJS String LengthJS Default ParametersGet Current URLGet Current Screen SizeGet Iframe Elements
Text Buttons with Individual Backgrounds
Text buttons with a specific background color on hover:
Example
.btn { border: none;
background-color: inherit; padding: 14px 28px;
font-size: 16px; cursor: pointer;
display: inline-block;}/*
Green */.success { color: green;}.success:hover {
background-color: #4CAF50; color: white;}/* Blue */.info {
color: dodgerblue;}.info:hover { background:
#2196F3; color: white;}/* Orange */.warning { color:
orange;}.warning:hover
{ background: #ff9800; color:
white;}/* Red */.danger { color: red;}.danger:hover {
background: #f44336; color: white;}/* Gray */.default
{ color: black;}.default:hover { background:
#e7e7e7;}
Go to our CSS Buttons Tutorial to learn
more about how to style buttons.
❮ Previous
Next ❯
Кернинг[править]
Сдвиг фонового изображения
Данный эффект может получиться весьма впечатляющим в зависимости от выбора фонового изображения. В демонстрации используется невзрачный фон и эффект выглядит невзрачно. Попробуйте использовать другую картинку и может получиться ошеломляющий эффект.
Основной код CSS
Основная часть кода не отличается от предыдущих примеров
Обратите внимание на то, что мы используем фоновое изображение. Начальное положение фона установлено в «0 0»
При наведении курсора положение сдвигается по вертикали.
#button3 {
background: #d11717 url('bkg-1.jpg');
background-position: 0 0;
text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3);
font-size: 22px;
height: 58px;
width: 155px;
margin: 50px 0 0 50px;
overflow: hidden;
display: block;
text-align: center;
line-height: 58px;
}
Эффекты CSS3
В данном примере нет ничего особенного — скругленные углы и тени.
/*Скругленные углы*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /*Тень*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
Анимация CSS
Анимация для данного случая длится дольше, чтобы создать плавный и интересный эффект.
/*Переход*/ -webkit-transition: All 0.8s ease; -moz-transition: All 0.8s ease; -o-transition: All 0.8s ease; -ms-transition: All 0.8s ease; transition: All 0.8s ease;
Наведение курсора мыши
Теперь пришла пора сдвигать фоновое изображение. Начальное положение было «0 0». Устанавливаем второй параметр в значение 150px. Для сдвига по горизонтали требуется изменить первый параметр.
#button3:hover {
background-position: 0px 150px;
}
Создание красивой кнопки для сайта
Мы уже говорили, что сверстать красивую кнопку для сайта можно посредством html-тегов <input>, <a> и <button>. У них разная логика работы и набор атрибутов, поэтому и используются они для различных целей.
Чтобы оформить ссылочный тег <a> как кнопку, нужно просто дописать нужные стили в CSS. Разметка будет выглядеть примерно так:
<a class=»button» href=»http://example.com» target=»_blank»>Перейти на сайт</a>
Для кнопок, которые не просто перебрасывают пользователя на другую страницу, а что-либо делают (отправляют данные из формы, очищают заполненные поля, открывают попап, загружают файл и т. п.), лучше применять тег <button>:
<button class=»button»>Отправить</button>
У него есть необязательный атрибут type – тип кнопки, принимающий значения трёх типов:
type: button | submit | reset
Подробнее
В принципе, его можно не прописывать вообще. Но если это кнопка в форме, то по умолчанию браузер интерпретирует любой <button> как <button type=”submit”> и по клику отправляет данные из формы.
Есть мнение, что этот тег должен находиться непременно внутри тега <form>. Это не совсем так. Если вы хотите разместить на сайте красивую кнопку за пределами формы, данными из которой она оперирует, просто добавьте ей атрибут form с id вашей формы, и всё будет работать корректно.
Есть и другие атрибуты у <button>:
- autofocus: установка фокуса на кнопку по умолчанию, как только загрузится страница;
- disabled: блокировка кнопки (на неё нельзя нажать, она ничего не делает);
- formaction (только в сочетании с типом submit): здесь прописывается URL обработчика данных из формы;
- formenctype (тоже только для submit): описывает тип данных, которые будут пересылаться в обработчик – application/x-www-form-urlencoded, multipart/form-data или text/plain;
- formmethod (только для submit): это HTTP-метод отправки данных. Принимает значения get/post;
- formtarget (только для submit): окно или фрейм, где будет выведен результат (_self, _blank, _top, _parent либо name фрейма);
- name: имя (необходимо для форм с несколькими кнопками, позволяет отслеживать, которая из них нажата);
- value: значение (по сути, этот атрибут аналогичен name).
Теперь давайте попробует создать для сайта две красивые кнопки разного типа: ссылочную с тегом <a>, ведущую на страницу регистрации, и целевую с тегом <button>, открывающую модальное окно. Оформим их в одном стиле.
<button id=»login» class=»button blue»>
<i class=»fa fa-unlock»></i>
<span>Войти в кабинет</span>
</button>
<a id=»register class=»button purple href=»/register>
<i class=»fa fa-user-plus»></i>
<span>Зарегистрироваться</span>
</a>
Если вам нужна иконка внутри кнопки, реализуйте её вывод с помощью иконочного шрифта FontAwesome. Для самой кнопки выберите гарнитуру Roboto – она отлично подходит и для латинских, и для кириллических текстов.
@import url(‘https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css’);
@import url(‘https://fonts.googleapis.com/css?family=Roboto’);
.button {
/* Обнуляем стили по умолчанию */
border: none;
outline: none;
display: inline-block;
text-align: center;
text-decoration: none;
cursor: pointer;
font-size: 16px;
/* Используем кастомные и обычные шрифты */
font-family: Roboto, Verdana, Tahoma, sans-serif;
/* Экспериментируем с отступами и прочим */
padding: 12px 16px;
border-radius: 100px;
color: #fff;
}
.button i {
margin-right: 4px;
}
.button + .button {
margin-left: 6px;
}
.button.blue {
background: #2196F3;
}
.button.purple {
background: #9b59b6;
}
Добавляем кнопке живость – заставляем её реагировать на наведение мыши изменением цвета: при наведении она подсвечивается, при клике – как бы прогибается внутрь и темнеет.
.button:hover {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.button:hover.blue {
background: #39a1f4;
}
.button:hover.purple {
background: #a66bbe;
}
.button:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.button:active.blue {
background: #0d8aee;
}
.button:active.purple {
background: #8f4bab;
}
На этом всё! Вы сделали две красивые кнопки для своего сайта.
More
Fullscreen VideoModal BoxesDelete ModalTimelineScroll IndicatorProgress BarsSkill BarRange SlidersTooltipsDisplay Element HoverPopupsCollapsibleCalendarHTML IncludesTo Do ListLoadersStar RatingUser RatingOverlay EffectContact ChipsCardsFlip CardProfile CardProduct CardAlertsCalloutNotesLabelsCirclesStyle HRCouponList GroupList Without BulletsResponsive TextCutout TextGlowing TextFixed FooterSticky ElementEqual HeightClearfixResponsive FloatsSnackbarFullscreen WindowScroll DrawingSmooth ScrollGradient Bg ScrollSticky HeaderShrink Header on ScrollPricing TableParallaxAspect RatioResponsive IframesToggle Like/DislikeToggle Hide/ShowToggle Dark ModeToggle TextToggle ClassAdd ClassRemove ClassActive ClassTree ViewRemove PropertyOffline DetectionFind Hidden ElementRedirect WebpageZoom HoverFlip BoxCenter VerticallyCenter Button in DIVTransition on HoverArrowsShapesDownload LinkFull Height ElementBrowser WindowCustom ScrollbarHide ScrollbarShow/Force ScrollbarDevice LookContenteditable BorderPlaceholder ColorText Selection ColorBullet ColorVertical LineDividersAnimate IconsCountdown TimerTypewriterComing Soon PageChat MessagesPopup Chat WindowSplit ScreenTestimonialsSection CounterQuotes SlideshowClosable List ItemsTypical Device BreakpointsDraggable HTML ElementJS Media QueriesSyntax HighlighterJS AnimationsJS String LengthJS Default ParametersGet Current URLGet Current Screen SizeGet Iframe Elements
Текстовые кнопки с индивидуальным фоном
Текстовые кнопки с определенным цветом фона при наведении курсора:
Пример
.btn { border: none; background-color: inherit; padding: 14px 28px; font-size: 16px; cursor: pointer; display: inline-block;}/* Зеленый */.success { color: green;}.success:hover { background-color: #4CAF50; color: white;}/* Синий */.info { color: dodgerblue;}.info:hover { background: #2196F3; color: white;}/* Оранжевый */.warning { color: orange;}.warning:hover { background: #ff9800; color: white;}/* Красный */.danger { color: red;}.danger:hover { background: #f44336; color: white;}/* Серый */.default { color: black;}.default:hover { background: #e7e7e7;}
Зайдите на наш учебникCSS Кнопки чтобы узнать больше о том, как стилизовать кнопки.
3D имитация нажатия кнопки
Последний пример в нашем уроке посвящен популярному методу 3D имитации нажатия кнопки при наведении на нее курсора мыши. Анимация для данного случая настолько проста, что даже не требуется задавать переход CSS. Но конечный результат получается вполне впечатляющим.
Основной код CSS
Код CSS для нашей кнопки.
#button4 {
background: #5c5c5c;
text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3);
font-size: 22px;
height: 58px;
width: 155px;
margin: 50px 0 0 50px;
overflow: hidden;
display: block;
text-align: center;
line-height: 58px;
}
Эффекты CSS3
В данном случае CSS3 перестает быть приятным опционом. Для получения эффекта требуются тени и градиент. Резкая тень создает видимость 3D кнопки.
/*Скругленные углы*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /*Тень*/ -webkit-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); /*Градиент*/ 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));
Наведение курсора мыши
В данном случае мы имеем самую большую секцию hover. Длина тени уменьшается, и с помощью полей создается смешение темной зоны. Все вместе создает иллюзию нажатия кнопки. Переворот градиента усиливает эффект.
#button4:hover {
margin-top: 52px;
/*Тень*/
-webkit-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8);
box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8);
/*Градиент*/
background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
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));
}
Диагностика оперативной памяти и выявление ошибок
Images
SlideshowSlideshow GalleryModal ImagesLightboxResponsive Image GridImage GridTab GalleryImage Overlay FadeImage Overlay SlideImage Overlay ZoomImage Overlay TitleImage Overlay IconImage EffectsBlack and White ImageImage TextImage Text BlocksTransparent Image TextFull Page ImageForm on ImageHero ImageBlur Background ImageChange Bg on ScrollSide-by-Side ImagesRounded ImagesAvatar ImagesResponsive ImagesCenter ImagesThumbnailsBorder Around ImageMeet the TeamSticky ImageFlip an ImageShake an ImagePortfolio GalleryPortfolio with FilteringImage ZoomImage Magnifier GlassImage Comparison Slider
