Search the Community
Showing results for tags 'кнопка'.
Found 16 results
-
Здравствуйте , сделал макет сайта для интернет магазина . Но столкнулся с проблемой при верстке кнопок на главной странице и не нашел информации как можно уместить текст + несколько картинок в одну кнопку. Знает кто решение и реалезуемо оно вообще ?
-
Всем привет! Может кто помочь, всунуть языковую кнопку на сайт. Сайт делал из шаблона, в html соображаю не очень сильно. Я так понимаю, можно сделать типа поддомен для другого языка или как проще? Сайт ТУТ. Спасибо!
-
Всем привет! Есть такая кнопка: Не понимаю, как сделать внизу такую темную линию, или через какое свойство достигается "такое" - не знаю как назвать даже. Подскажите пожалуйста, как это сделать ?
-
Нашла анимацию гамбургер меню из трех полосок в крестик. Не могу понять как к нему прикрепить появление самого меню при нажатии. <nav class="nav"> <div class="nav__btn"> <a id="nav-toggle" href="#"><span></span> </a> </div> <ul class="nav__list"> <li> <a href="#" class="nav__link">Episodes</a> </li> <li> <a href="#" class="nav__link">Characters</a> </li> <li> <a href="#" class="nav__link">Park</a> </li> <li> <a href="#" class="nav__link">Gallery</a> </li> <li> <a href="#" class="nav__link">actors</a> </li> </ul> </nav> $(document).ready(function(){ $('#nav-toggle').click(function(){ $(this).toggleClass('active'); }); .nav__list { display: none; } #nav-toggle {position: relative; display: inline-block; width:42px; height:25px;} #nav-toggle span { position: absolute; left: 0; top: 10px; } #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { position: absolute; display: block; content: ''; height: 5px; width: 42px; background: #000; border-radius: 2px; cursor: pointer; } #nav-toggle span:before { top: -10px; } #nav-toggle span:after { bottom: -10px; } /* Добавим анимацию всех свойств для блоков нашей иконки */ #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { transition: all 500ms ease-in-out; } /* Центральный блок делаем прозрачным */ #nav-toggle.active span { background-color: transparent; } /* Смещаем псевдо-элементы в центр иконки (на место основного блока) */ #nav-toggle.active span:before, #nav-toggle.active span:after { top: 0; } /* Наклоняем псевдо-элементы под углом 45 градусов, но в разные стороны */ #nav-toggle.active span:before { transform: rotate(45deg); } #nav-toggle.active span:after { transform: rotate(-45deg); }
-
Помогите, пожалуйста, разобраться как активировать кнопки чтобы при нажатии на них сменялась информация (текст/картинка). Один отзыв заменял другой. Прикрепляю свой код. Большое спасибо) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="reviews.css"> </head> <body> <style type="text/css"> .uc-reviws { position: relative; display: block; } .uc-reviews-slider{ overflow: hidden; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .uc-reviews-slider-wrapper{ max-width: 100%; overflow: hidden; position: relative; display: block; } .uc-reviews-slider-wrapper > .uc-reviews-list:after { clear: both; } .uc-reviews-slider-wrapper .uc-reviews-list{ -webkit-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); transform: translate(0px, 0px); -webkit-transition: all 1s; -webkit-transition-property: -webkit-transform,height; -moz-transition-property: -moz-transform,height; transition-property: transform,height; -webkit-transition-duration: inherit !important; transition-duration: inherit !important; -webkit-transition-timing-function: inherit !important; transition-timing-function: inherit !important; } .uc-reviews-list:before { content: " "; display: table; } .uc-reviews-slider-wrapper > *.active { z-index: 10; } .uc-reviews-slider-wrapper > *.active { opacity: 1; } .uc-reviews-block{ cursor: -webkit-grab; float: left; display: list-item; text-align: -webkit-match-parent; margin: 0px 0 0 0; position: relative; } .uc-reviews-img{ width: 100%; height: 100%; position: relative; z-index: 55; } .uc-reviews-wrapper{ position: absolute; z-index: 77; top: 0; margin: -0.7% 0 0 50%; padding-top: 40px; min-height: 100%; max-width: 1600px; box-sizing: border-box; display: block; } .uc-reviews-text { width: 485px; left: 50%; padding: 30px 0 0 45px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: block; } .uc-reviews-text-outer-type-a:before{ content: ''; position: absolute; left: 11px; background: #3c3c3c; width: 28px; height: 2px; margin: 9px 0 15px 0; } .uc-reviews-text-outer-type-a p { font-size: 17px; font-family: Lato_regular; line-height: 22px; color: #000; margin: 0 0 20px 0; position: relative;} .uc-reviews-text-outer-type-b p { font-size: 16px; font-family: Lato_italic; color: #747474; margin: 20px 0 0 0; } .uc-reviews-slider:after { clear: both; content: " "; display: table; } .uc-reviews-buttom { display: block; } .uc-reviews-buttom_left { width: 32px; display: block; top: 50%; height: 32px; background-image: url(http://ihub.world/wp-content/themes/ihub/img/controls.png); cursor: pointer; position: absolute; z-index: 9999; opacity: 0.8; margin-top: -16px; background-position: 0 0; left: 30px; -webkit-transition: opacity 0.35s linear 0s; transition: opacity 0.35s linear 0s; } .uc-reviews-buttom_right{ width: 32px; display: block; top: 50%; height: 32px; background-image: url(http://ihub.world/wp-content/themes/ihub/img/controls.png); cursor: pointer; position: absolute; z-index: 9999; margin-top: -16px; opacity: 0.8; -webkit-transition: opacity 0.35s linear 0s; transition: opacity 0.35s linear 0s; background-position: -32px 0; right: 30px; } .uc-reviews-number { position: relative; bottom: 67px; left: 0; right: 0; margin: 0 auto; padding: 0; text-align: center; } .uc-reviews-slider .uc-reviews-number a { background-color: #222222; border-radius: 30px; display: inline-block; height: 8px; overflow: hidden; text-indent: -999em; width: 8px; position: relative; z-index: 99; -webkit-transition: all 0.5s linear 0s; transition: all 0.5s linear 0s; cursor: pointer; } .uc-reviews-slider .uc-reviews-number > li:hover a, .uc-reviews-slider .uc-reviews-number > li.active a { background-color: #428bca; } .uc-reviews-slider .uc-reviews-number { margin: 10px 0 0; padding: 0; text-align: center; } .uc-reviews-slider .uc-reviews-number-position { cursor: pointer; display: inline-block; padding: 0 5px; } </style> <div class="uc-reviews"> <div class="uc-reviews-slider "><div class="uc-reviews-slider-wrapper" style="transition-duration: 1000ms; transition-timing-function: ease;"> <ul class="uc-reviews-list" style="width: 9443px; transform: translate3d(-2698px, 0px, 0px); height: 424px; padding-bottom: 0%;"> <li class="uc-reviews-block" style="width: 1349px; margin-right: 0px;"> <img src="http://storage2.static.itmages.ru/i/18/0104/h_1515086726_8963396_bc057ad031.jpg" alt=""> <div class="uc-reviews-wrapper"> <div class="uc-reviews-text"> <div class="uc-reviews-text-outer-type-a"> <p>“Management of the centre frequently engages media to showcase the success of their residents.</p> <p>iHUB also provides an opportunity for all their startups to participate in interesting events. For example, we have presented our startup in Oslo thanks to iHUB.”</p> </div> <p class="review-bg-text-outer-type-b"> Nikita Dobrynin & Katia Dobrynina, Founders @ AstraFit </p> </div> </div> </li> <li class="uc-reviews-block" style="width: 1349px; margin-right: 0px;"> <img src="http://storage4.static.itmages.ru/i/18/0104/h_1515086781_3914429_0b10231d6a.jpg" alt=""> <div class="uc-reviews-wrapper"> <div class="uc-reviews-text"> <div class="uc-reviews-text-outer-type-a"> <p>“iHUB has all the necessary infrastructure, and most importantly – a community of smart and creative people, as well as a great number of events attended by many investors and leading industry experts.”</p> </div> <p class="uc-reviews-text-outer-type-b"> Stakh Vozniak, CEO @ TONA </p> </div> </div> </li> <li class="uc-reviews-block" style="width: 1349px; margin-right: 0px;"> <img src="http://storage8.static.itmages.ru/i/18/0104/h_1515086875_1757560_ad7a2b467a.jpg" alt=""> <div class="uc-reviews-wrapper"> <div class="uc-reviews-text"> <div class="uc-reviews-text-outer-type-a"> <p>“iHUB has all the necessary infrastructure, and most importantly – a community of smart and creative people, as well as a great number of events attended by many investors and leading industry experts.”</p> </div> <p class="uc-reviews-text-outer-type-b"> Stakh Vozniak, CEO @ TONA </p> </div> </div> </li></ul> <div class="uc-reviews-buttom"> <a class="uc-reviews-buttom_left"></a> <a class="uc-reviews-buttom_right"></a></div></div> <ul class="uc-reviews-number" style="margin-top: 5px; transform: translate3d(0px, 0px, 0px);"> <li class="uc-reviews-number-position"><a href="#">1</a> </li> <li class="uc-reviews-number-position"><a href="#">2</a> </li> <li class="uc-reviews-number-position"><a href="#">3</a></li></ul></div> </div> </body> </html>
-
Пытаюсь реализовать кнопку необычной формы. Проблем с кнопкой не было, до того момента, как встала задача добавить при наведении эффект glow. Вот тут то и вышли проблемы. Сам пример тут. Если кратко то куски кнопки, которые эмулируют скосы отображаются как части, а не как единое целое. При ховер у меня также меняется прозрачность. По кнопке перерыл весь инет, нашел вот это. Но в основном эти реализации либо не работают с бордером, либо поддержка в браузерах малая(clip-path). В общем был бы благодарен за помощь.
-
Здравствуйте. Возник такой вопрос : как в блог в панель редактирования установить кнопку закрытия внешних ссылок?
-
Доброго времени суток! Учусь делай сайты на Джумла, сейчас переделываю свой. Скачала шаблон, установила, мне все нравится. Только возникла небольшая проблема с анимацией. Вроде и понимаю что нужно дописать.. но не понимаю как и куда. При помощи Firebug нашла где что находится и почти сделала как нужно.. только вот анимацию не могу добавить. Установила для пользователей community builder и там другая форма входа была (не такая красивая). Верхняя форма - новая. Нижняя оригинальная. Мне нужно чтобы в новой форме при наведении тоже кнопочка меняла цвет на фиолетовый. Скрин В коде это выглядит так: та что не меняет цвет: body, select, input, textarea, button { font-family: "DroidSerifRegular";}button, input[type="button"], form.style input[type="submit"] { background-color: #f0f0f0; border-color: #d3d3d3; border-radius: 5px; border-style: solid; border-width: 1px; color: #68615d; padding: 7px;}select, input, textarea, button { font: 12px Arial,sans-serif;}button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer;}*::-moz-selection { background: none repeat scroll 0 0 #95add4; color: #fff;та что меняет цвет: form.box fieldset, form.style input, form.style textarea, form.style select, form.style button, form.style input[type="button"] { border-color: #d3d3d3;}form.style input, form.style textarea, form.style select, form.style button, form.style input[type="button"] { color: #68615d;}form.style button, form.style input[type="button"], form.style input[type="submit"] { background-color: #f0f0f0;}form.style input, form.style textarea, form.style select, form.style button { border-color: #ebebeb; border-radius: 5px; border-style: solid; border-width: 1px; padding: 7px;}body, select, input, textarea, button { font-family: "DroidSerifRegular";}button, input[type="button"], form.style input[type="submit"] { background-color: #f0f0f0; border-color: #d3d3d3; border-radius: 5px; border-style: solid; border-width: 1px; color: #68615d; padding: 7px;}select, input, textarea, button { font: 12px Arial,sans-serif;}button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer;}*::-moz-selection { background: none repeat scroll 0 0 #95add4; color: #fff;а это код самой анимации: form.style input,form.style select,form.style textarea,form.style button:hover,form.style input[type="button"]:hover,form.style input.button:hover,form.style #submit:hover {-webkit-transition:color 0.25s ease-in-out,border-color 0.25s ease-in-out,background 0.25s ease-in-out;-moz-transition:color 0.25s ease-in-out,border-color 0.25s ease-in-out,background 0.25s ease-in-out;-o-transition:color 0.25s ease-in-out,border-color 0.25s ease-in-out,background 0.25s ease-in-out;transition:color 0.25s ease-in-out,border-color 0.25s ease-in-out,background 0.25s ease-in-out;}в общем.. я что-то дико туплю и не понимаю куда чего надо добавить =(((((
-
если кто не в курсе есть тому объяснение вот здесь суть в чем. нужна при нажатии на кнопку что бы появлялось колесо загрузки(типа обновление страницы, как на известных ресурсах) - помогите организовать
-
Здравствуйте! Возникла небольшая проблема с вёрсткой. Есть html: <div class="best"> <div class="slider"> <img src="img/food.png"> </div> </div> Есть css: .slider:active > img { background-image: url("../img/block.png") } Моя цель, чтобы на картинку, которая из html загружался сферху фон из css (block.png) по клику. Но выходит так, что фон (block.png) загружается за картинкой из html (food.png) и ощущение, что ничего не происходит.
-
Добрый день! Вопрос по всплывающим формам на странице HTTP://bloky.ru/catalog/326 На странице есть две кнопки "Заказать". Одна из них, та, что справа вертикально расположена, при нажатии открывает всплывающую форму заявки. Как сделать так, чтобы при нажатии кнопки "Заказать", которая в середине страницы, открывалась такая же форма заявки? Заранее спасибо!
-
Вот такую штуку на css без картинок.
-
Подскажите,хочу добавить кнопку вызова адресата скайп но оригинальная кнопка меня не устраивает, подскажите как кастомизировать.
-
Как реализовать кнопку mute? добавил фоновый звук на страницу <embed src="http://www.podst.r/user_files/2/3800/snow_wind_128.MP3" hidden="true"></embed>хочу сделать отдельную кнопку для включение выключение звука на странице.. для вместо <button> использую обычный рисунок (с hover в стиле), а вот как задать команду для остановки аудио не знаю.. Уважаемые форумчане, помогите нубу
-
Дело вот в чем. С помощью такого кода добавил в горизонтальное меню своего сайта форму поиска: function menu_search($items){ $search = '<li class="search">'; $search .= '<form method="get" id="searchform" action="/">'; $search .= '<nobr><input type="text" class="field" name="s" id="s" placeholder="Search..." />'; $search .= '<input type="submit" class="submit" name="submit" id="searchsubmit" value="Go" /></nobr>'; $search .= '</form>'; $search .= '</li>'; return $items . $search; } add_filter('wp_nav_menu_items','menu_search'); Получилось так: Т.е. как бы форма поиска стала очередным пунктом меню. Захотел я сделать красиво и выровнять эту форму вместе с кнопкой по правому краю. Сделать это мне не удалось и я решил прописать для input параметр margin-left: input { vertical-align: middle; margin-top: 7px; margin-left: 300px; } Получилось вот так: Т.е. сначала форма ввода отступила от левого края 300px, а потом и кнопка. Подумал я и дописал position: input { vertical-align: middle; margin-top: 7px; position: absolute; margin-left: 300px; } Получилось так: Вопрос: что мне надо сделать, что бы кнопка шла аккурат за формой ввода?
-
Здравствуйте... У меня есть вопрос, как сделать кнопку активной после нажатия на нее.. Допустим имеется ссылка в навигационной панели, нажимаешь на необходимую категорию, после перехода, - это кнопка имеет друргой цвет - что показывает что она сейчас активна...
