Создаем анимированные кнопки при помощи CSS3
В данной статье я хочу поделиться с вами некоторыми экспериментами по созданию анимированных кнопок при помощи CSS3. Идея заключается в создании анимированных ссылок с разными стилями, hover-эффектами и пр.
В данных примерах используются иконки с webiconset.com, а также шрифт от Just Be Nice.
Мы рассмотрим каждый пример и разберем как выглядит их HTML-структура и стили для разных состояний кнопок.
Обратите внимание, что анимация/переходы будут работать только в браузерах, которые поддерживают эти CSS3-свойства.
Чтобы не захламлять код в уроке я не буду использовать префиксы для различных браузеров. Их вы сможете увидеть в архиве с примерами.
Пример 1
В этом примере мы создадим большую кнопку с несколькими элементами на ней. Она будет иметь иконку, основной текст, стрелку с правой стороны и цену, которая будет появляться только когда мы наводим курсор.
HTML-разметка
Структура довольно проста: иконка изображения и другие элементы в тегах span:
CSS
В стилях мы убедимся что переходы установлены правильно для элемента, который мы хотим анимировать при наведении. Цена будет невидимой, установим её прозрачность на 0. Применение множества box-shadow позволит нам создавать реалистичные эффекты:
.a-btn < background: linear-gradient(top, #a9db80 0%,#96c56f 100%); padding-left: 90px; padding-right: 105px; height: 90px; display: inline-block; position: relative; border: 1px solid #80ab5d; box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2); border-radius: 4px; float: left; clear: both; margin: 10px 0px; overflow: hidden; transition: box-shadow 0.3s ease-in-out; >.a-btn img < position: absolute; left: 15px; top: 13px; border: none; transition: all 0.3s ease-in-out; >.a-btn .a-btn-slide-text < position: absolute; font-size: 36px; top: 18px; left: 18px; color: #6d954e; opacity: 0; text-shadow: 0px 1px 1px rgba(255,255,255,0.4); transition: opacity 0.2s ease-in-out; >.a-btn-text < padding-top: 13px; display: block; font-size: 30px; text-shadow: 0px -1px 1px #80ab5d; >.a-btn-text small < display: block; font-size: 11px; letter-spacing: 1px; >.a-btn-icon-right < position: absolute; right: 0px; top: 0px; height: 100%; width: 80px; border-left: 1px solid #80ab5d; box-shadow: 1px 0px 1px rgba(255,255,255,0.4) inset; >.a-btn-icon-right span < width: 38px; height: 38px; opacity: 0.7; border-radius: 20px; position: absolute; left: 50%; top: 50%; margin: -20px 0px 0px -20px; border: 1px solid rgba(0,0,0,0.5); background: #4e5c50 url(../images/arrow_down.png) no-repeat center center; box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5); transition: all 0.3s ease-in-out; >При наведении мыши на кнопку мы будем менять тень, а также покажем цену и спрячем изображение:
.a-btn:hover < box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4); >.a-btn:hover img < transform: scale(10); opacity: 0; >.a-btn:hover .a-btn-slide-text, .a-btn:hover .a-btn-icon-right span
В активном состоянии сделаем кнопку нажатой добавив тень. Значок стрелки справа будет увеличен:
.a-btn:active < position:relative; top:1px; background:#80ab5d; box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset; border-color: #a9db80; >.a-btn:active .a-btn-icon-right span
Пример 2
Второй пример будет очень похож на первый, только мы добавим несколько новых эффектов.
HTML-разметка
Разметка на этом примере будет такой же, как и в первом примере.
CSS
Стили почти такие же, как и в первом примере, мы просто адаптируем цвета. Но мы сделаем другой эффект при наведении. Цена увеличится до исходного размера и иконка исчезнет. Для стрелки изменим цвет фона на красный:
.a-btn:hover < box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4); >.a-btn:hover img < opacity: 0; >.a-btn:hover .a-btn-slide-text < opacity: 1; transform: scale(1); >.a-btn:hover .a-btn-icon-right span
Активное состояние будет таким же, как и в предыдущем примере. Мы будем только изменять цвета. Когда мы нажимаем кнопку, мы будем также поворачивать стрелку:
.a-btn:active < position: relative; top: 1px; background: #5d81ab; box-shadow: 1px 1px 2px rgba(0,0,0,0.4) inset; border-color: #80a9da; >.a-btn:active .a-btn-icon-right span
Пример 3
В этом примере мы попытаемся сделать что-то совершенно другое. Кнопка будет расширяться вниз при наведении и раскрывать еще одно сообщение. Значок стрелки будет слегка вращаться.
HTML-разметка
Разметка в примере 3, будет несколько иной, чем в предыдущих примерах. Текст, который будет скользить вниз, будет в теге span с классом «a-btn-slide-text»:
CSS
В нормальном состоянии кнопка будет иметь определенную высоту, мы будем анимировать её при наведении с целью вывода дополнительных сообщений. Дополнительное сообщение «a-btn-slide-text» будет позиционироваться абсолютно и мы будем увеличивать его высоту от 0 до 30 пикселей при наведении.
.a-btn < background: linear-gradient(top, #feda71 0%,#febb4a 100%); border: 1px solid #f5b74e; border-color: #f5b74e #e5a73e #d6982f; box-shadow: 0 1px 1px #d3d3d3, inset 0 1px 0 #fee395; padding: 0px 80px 0px 10px; height: 38px; display: inline-block; position: relative; border-radius: 4px; float: left; margin: 10px; overflow: hidden; transition: all 0.3s linear; >.a-btn-text < padding-top: 5px; display: block; font-size: 18px; white-space: nowrap; color: #996633; text-shadow: 0 1px 0 #fedd9b; transition: all 0.3s linear; >.a-btn-slide-text < position:absolute; top: 35px; left: 0px; width: auto; right: 52px; height: 0px; background: #fff; color: #996633; font-size: 13px; white-space: nowrap; font-family: Georgia, serif; font-style: italic; text-indent: 15px; overflow: hidden; line-height: 30px; box-shadow: -1px 0px 1px rgba(255,255,255,0.4), 1px 1px 1px rgba(0,0,0,0.5) inset; transition: height 0.3s linear; >.a-btn-icon-right < position: absolute; right: 0px; top: 0px; height: 100%; width: 52px; border-left: 1px solid #f5b74e; box-shadow: 1px 0px 1px rgba(255,255,255,0.4) inset; >.a-btn-icon-right span < width: 38px; height: 38px; opacity: 0.7; position: absolute; left: 50%; top: 50%; margin: -20px 0px 0px -20px; background: transparent url(../images/arrow_right.png) no-repeat 50% 55%; transition: all 0.3s linear; >При наведении мы будем менять высоту кнопки и дополнительный текст. Мы также будем вращать значок стрелки на 45 градусов:
.a-btn:hover < height: 65px; box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4); >.a-btn:hover .a-btn-text < text-shadow: 0px 1px 1px rgba(0,0,0,0.2); color: #fff; >.a-btn:hover .a-btn-slide-text < height: 30px; >.a-btn:hover .a-btn-icon-right span
В активном состоянии кнопка будет немного двигаться и изменять цвет, так что кнопка будет казаться нажатой:
.a-btn:active < position:relative; top:1px; background: linear-gradient(top, #fec354 0%,#fecd61 100%); /* W3C */ border-color: #d29a3a #cc9436 #c89133; text-shadow: 0 1px 0 #fee1a0; box-shadow: 0 1px 1px #d4d4d4, inset 0 1px 0 #fed17e; >Пример 4
В примере 4, мы будем выдвигать дополнительное сообщение, как и в предыдущем примере, но мы сделаем это теперь с правой стороны. Это будет выглядеть как будто кнопка открывает сообщение внутри себя.
HTML-разметка
Разметка в этом примере такая же, как и в предыдущем.
CSS
Стили кнопки будут похожи на предыдущий пример. Мы только изменим цвет и положение дополнительного текста:
.a-btn < background: linear-gradient(top, #80a9da 0%,#6f97c5 100%); padding-left: 20px; padding-right: 80px; height: 38px; display: inline-block; position: relative; border: 1px solid #5d81ab; box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5); border-radius: 20px; float: left; clear: both; margin: 10px 0px; overflow: hidden; transition: all 0.3s linear; >.a-btn-text < padding-top: 5px; display: block; font-size: 18px; white-space: nowrap; text-shadow: 0px 1px 1px rgba(255,255,255,0.3); color: #446388; transition: all 0.2s linear; >.a-btn-slide-text < position:absolute; height: 100%; top: 0px; right: 52px; width: 0px; background: #63707e; text-shadow: 0px -1px 1px #363f49; color: #fff; font-size: 18px; white-space: nowrap; text-transform: uppercase; text-align: left; text-indent: 10px; overflow: hidden; line-height: 38px; box-shadow: -1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset; transition: width 0.3s linear; >.a-btn-icon-right < position: absolute; right: 0px; top: 0px; height: 100%; width: 52px; border-left: 1px solid #5d81ab; box-shadow: 1px 0px 1px rgba(255,255,255,0.4) inset; >.a-btn-icon-right span < width: 38px; height: 38px; opacity: 0.7; position: absolute; left: 50%; top: 50%; margin: -20px 0px 0px -20px; background: transparent url(../images/arrow_right.png) no-repeat 50% 55%; transition: all 0.3s linear; >При наведении мы увеличим справа padding кнопки, а также ширину тега span с классом «a-btn-slide-text»:
.a-btn:hover < padding-right: 180px; box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2); >.a-btn:hover .a-btn-text < text-shadow: 0px 1px 1px #5d81ab; color: #fff; >.a-btn:hover .a-btn-slide-text < width: 100px; >.a-btn:hover .a-btn-icon-right span
В активном состоянии создадим эффект нажатия при помощи тени:
.a-btn:active
Пример 5
В этом примере мы будем использовать символьный шрифт для иконок. Идея заключается в создании следующего эффекта: при наведении мыши иконка исчезает и появляется движущаяся стрелка.
HTML-разметка
Структура будет состоять из 4 тегов span внутри ссылки. Span с классом «a-btn-slide-icon» будет анимировать стрелку, она будет двигаться сверху вниз.
CSS
Поскольку мы будем использовать шрифт для отображения иконки с левой стороны, мы должны будем подключить этот шрифт.
Мы будем скрывать стрелку, установив её значение top равным -30px.
@font-face < font-family: 'WebSymbolsRegular'; src: url('websymbols/websymbols-regular-webfont.eot'); src: url('websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'), url('websymbols/websymbols-regular-webfont.woff') format('woff'), url('websymbols/websymbols-regular-webfont.ttf') format('truetype'), url('websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg'); font-weight: normal; font-style: normal; >.a-btn < border-radius: 50px; padding: 10px 30px 10px 70px; position: relative; float:left; display: block; overflow: hidden; margin: 10px; background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 74%,rgba(237,237,237,1) 100%); box-shadow: 0px 0px 7px rgba(0,0,0,0.2), 0px 0px 0px 1px rgba(188,188,188,0.1); transition: box-shadow 0.3s ease-in-out; >.a-btn-symbol < font-family: 'WebSymbolsRegular', cursive; color: #555; font-size: 20px; text-shadow: 1px 1px 2px rgba(255,255,255,0.5); position:absolute; left: 20px; line-height: 32px; transition: opacity 0.3s ease-in-out; >.a-btn-text < font-size: 20px; color: #d7565b; line-height: 16px; font-weight: bold; font-family: "Myriad Pro", "Trebuchet MS", sans-serif; text-shadow: 1px 1px 2px rgba(255,255,255,0.5); display: block; >.a-btn-slide-text < font-family: Arial, sans-serif; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #555; text-shadow: 0px 1px 1px rgba(255,255,255,0.9); >.a-btn-slide-icon < position:absolute; top:-30px; width: 22px; height: 22px; background: transparent url(../images/arrow_down_black.png) no-repeat top left; left:20px; opacity: 0.4; >При наведении мы будем прятать значок слева и бесконечно проигрывать анимацию для стрелки:
.a-btn:hover < background: #fff; box-shadow: 0px 0px 9px rgba(0,0,0,0.4), 0px 0px 0px 1px rgba(188,188,188,0.1); >.a-btn:hover .a-btn-symbol < opacity: 0; >.a-btn:hover .a-btn-slide-icon
При нажатии на кнопку мы сделаем её красной и создадим эффект нажатия добавив тень:
.a-btn:active < background: #d7565b; box-shadow: 0px 2px 2px rgba(0,0,0,0.6) inset, 0px 0px 0px 1px rgba(188,188,188,0.1); >.a-btn:active .a-btn-text < color: #fff; text-shadow: 0px 1px 1px rgba(0,0,0,0.3); >.a-btn:active .a-btn-slide-text
И, наконец, простая анимация для перемещения стрелки сверху вниз:
@keyframes slideDown < 0% < top: -30px; >100% < top: 80px;>> Пример 6
В этом примере мы создадим круглую кнопку со звездочкой в ней. Мы заставим звезду вращаться при наведении курсора (с небольшим импульсом) и сделаем появление дополнительного текста.
HTML-разметка
У нас будет три тега span в нашей кнопке-ссылке. В последнем будет скрытый текст, который показывается при наведении.
CSS
Мы поиграемся немного с nth-child в этом примере. Так как у нас есть 3 тега span, мы будем обращаться к ним так: .a-btn span:nth-child(1), .a-btn span:nth-child(2) and .a-btn span:nth-child(3).
Мы сделаем кнопки круглыми и добавим необычные тени к ним. Для того, чтобы отцентрировать основной текст по вертикали, мы установим display равным table-cell. Звезды и скрытый текст будет позиционироваться абсолютно.
.a-btn < width: 120px; height: 120px; border-radius: 50%; display: block; margin: 20px; float: left; background: #f0ad4e; position: relative; box-shadow: 0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 0px 0px 1px 8px rgba(188, 188, 188, 0.4), 0px 0px 0px 9px #fff; transition: all 0.3s linear; >.a-btn span < display: table-cell; width: 80px; height: 80px; padding: 20px; text-align: center; vertical-align: middle; font-size: 26px; color: #fff; text-shadow: 0px 1px 1px #A03F16; font-family: "Arvo", "Myriad Pro", "Trebuchet MS", sans-serif; transition: all 0.3s linear; >.a-btn span:nth-child(1), .a-btn span:nth-child(3) < position: absolute; top: 0px; left: 0px; font-size: 40px; line-height: 36px; opacity: 0; >.a-btn span:nth-child(1) < background: transparent url(../images/star.png) no-repeat center center; opacity: 0.2; >При наведении мы будем менять тень кнопки так, что она кажется поднятой. Скрытый текст будет проявляться, и мы применим анимацию для начального текста. Мы также применим анимацию вращения для звезды:
.a-btn:hover < background: rgba(170, 77, 27, 0.6); box-shadow: 0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 1px 4px 5px 8px rgba(188, 188, 188, 0.6), 0px 0px 0px 9px #fff; >.a-btn:hover span:nth-child(3) < opacity: 1; >.a-btn:hover span:nth-child(2) < transform: scale(0); opacity: 0; >.a-btn:hover span:nth-child(1)
Теперь сделаем кнопку якобы нажатой при нажатии на нее:
.a-btn:active < box-shadow: 0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff, 0px -1px 0px 8px rgba(188, 188, 188, 0.3), 0px 0px 0px 10px #fff; >.a-btn:active span:nth-child(2)
Анимация вращения/пульсации выглядит следующим образом:
@-webkit-keyframes rotate < 0% < transform: scale(1) rotate(0);>50% < transform: scale(0.5) rotate(180deg);>100% < transform: scale(1) rotate(360deg);>> Пример 7
В последнем примере мы создадим псевдо 3D-кнопку, использовав некоторые классные тени.
HTML-разметка
Структура будет такая же как и в пятом примере
CSS
Стиль будет также очень похож на пример 5, мы просто изменим некоторые цвета и тени:
.a-btn < border-radius: 10px; padding: 10px 30px 10px 70px; position: relative; float:left; display: block; overflow: hidden; margin: 10px; background: linear-gradient(top, #b7f2f4 0%,#7ce7ea 100%); border: 1px solid #90c6c8; border-color: #90c6c8 #78bdc0 #65b6ba; box-shadow: 0px -5px 0px 0px #458a8c, 0 1px 1px #d5d5d5, 0 1px 0 rgba(255,255,255,0.8) inset; transition: all 0.2s linear; >.a-btn-symbol < font-family: 'WebSymbolsRegular', cursive; color: #437b7d; text-shadow: 0 1px 0 #bef3f5; font-size: 20px; position:absolute; left: 20px; width: 20px; text-align: center; line-height: 32px; transition: all 0.3s ease-in-out; >.a-btn-text < font-size: 20px; color: #437b7d; text-shadow: 0 1px 0 #bef3f5; line-height: 16px; font-weight: bold; font-family: "Myriad Pro", "Trebuchet MS", sans-serif; display: block; >.a-btn-slide-text
При наведении мы будем увеличивать кнопку и вращать маленькую иконку:
.a-btn:hover < transform: scale(1.05); >.a-btn:hover .a-btn-symbol
При нажатии на кнопку, мы сделаем кнопку меньше и нажав на неё, изменим тень:
.a-btn:active
Вот и всё! Надеюсь, вам понравилось создание некоторых крэйзи-кнопок при помощи CSS3 и вы получили вдохновение для своих экспериментов!
P.S. Предыдущие статьи посвященные CSS3-анимации Вы можете увидеть тут и тут.
Бургер кнопка для меню
Далее идем в CSS и задаем размер нашей кнопке и сбрасываем стандартные стили фона и границ. Верхнюю и нижнюю линии мы создадим с помощью псевдоэлементов ::after и ::before , задав им ширину 100%, высоту 4px и расположив их абсолютно относительно кнопки снизу и сверху, а третью зададим как тень от одной из линий и отпустим на середину кнопки.
.burger < position: relative; border: none; background: transparent; width: 40px; height: 26px; >.burger::before, .burger::after < content: ''; left: 0; position: absolute; display: block; width: 100%; height: 4px; border-radius: 10px; background: #000; >.burger::before < top: 0; box-shadow: 0 11px 0 #000; >.burger::after
В итоге мы получаем такую бургер кнопку
Анимируем бургер кнопку на JS
Добавим кнопке анимацию при клике, кнопка будет превращаться в крестик и обратно. Для этого нам понадобится использовать немного javaScript. Получим кнопку и при клике на нее будем добавлять и удалять ей класс active.
const burger = document.querySelector('.burger'); burger.addEventListener('click', () => < burger.classList.toggle('active'); >);А в сss мы добавим стили для активной кнопки, развернем линии на 45 градусов и скроем среднюю линию, чтобы получится крест. Для плавной анимации добавим свойство transition и пропишем в нем свойства которые мы анимируем. Первым значением в transition идет анимируемое свойство, вторым время за которое происходит изменение и третьим задержка. Чтобы анимировать несколько свойств, все необходимые свойства и насторойки к ним, добавляются через запятую.
.burger::before < transition: box-shadow .3s .15s, top .3s .15s, transform .3s; >.burger::after < transition: bottom .3s .15s, transform .3s; >.burger.active::before < top: 11px; transform: rotate(45deg); box-shadow: 0 6px 0 rgba(0,0,0,0); transition: box-shadow .15s, top .3s, transform .3s .15s; >.burger.active::after
И получаем готовую бургер кнопку
Анимируем бургер кнопку без JS
Анимировать можно и без javaScript. Для этого заменим button на label и добавим ему атрибут for со значением burger-checkbox . Также перед label добавим input с типом checkbox , индинтификатором и классом burger-checkbox . Теперь при нажатии на label будет срабатывать чекбокс. Сам чекбокс мы скроем и при помощи псевдокласса :checked и комбинатора + будем изменять стиль активной кнопки, когда чекбокс выбран. Следовательно, в css заменяем селектор .burger.active на .burger-checkbox:checked + .burger .
Как сделать открывающееся бургер меню без javaScript, с использованием данной кнопки читайте в нашей статье – Бургер меню на HTML и CSS
Анимированная светящаяся при наведении кнопка с помощью CSS
Простой пример очередной анимированной кнопки с эффектом свечения при наведении. Можно сделать свечение кнопки и без наведения, это уже дело вкуса и дизайна.
HTML для кнопки
.btn < position: relative; display: inline-block; width: 200px; height: 60px; text-align: center; line-height: 60px; color: #fff; font-size: 24px; text-transform: uppercase; text-decoration: none; font-family: sans-serif; box-sizing: border-box; background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4); background-size: 400%; border-radius: 30px; z-index: 1; >.btn:hover < animation: animate 8s linear infinite; >@keyframes animate < 0% < background-position: 0%; >100% < background-position: 400%; >> .btn:before < content: ""; position: absolute; top: -5px; right: -5px; bottom: -5px; left: -5px; z-index: -1; background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4); background-size: 400%; border-radius: 40px; opacity: 0; transition: .5s; >.btn:hover:before
Пример того, как будет выглядеть анимированная кнопка
Видео урока, как написать код для данной светящейся кнопки. Я бы пекомендовал, не копирвоать код, а написать его по этому видео. Это зайет на 2 минуты больше времени, но будет понятна логика, как работает анимация «свечения».
Репозиторий с оптимизатором картинок на Github — https://github.com/DenisShapkun/images-optimization. В общем, это моя секретная разработка для…
Разберемся, какие видео нужно использовать на своем сайте, какие нужны форматы и какого размера видео…
Когда-то я уже делал небольшую статью про создание видео-фона в блоке (Делаем видео-фон для блока…
Суть проблемы — мобильные браузеры, в частности, Safari отображают семизначные числа как ссылку на телефон….
Здравствуйте, кнопка просто супер . Все отлично, но есть маленький нюанс: в браузере Safari при выделении кнопки появляется прямоугольник. На сколько я понял из-за фильтра filter: blur
К Гугл Хроме все отлично отображается. Не подскажите, как можно поправить данный нюанс , чтобы и в Сафари отлично отображался ?
Кстати Сафари схож с браузером Мозила
Проблему видел, как вылечить на 100% не знаю, но на вскидку пару вариантов попробовал, если уменьшить blur и увеличить размер псевдо-элемента, то рамка пропадает, но и фон выглядит меньше, не таким светящимся. А иначе в Сафари выглядит как-будто фон ограничивается и обрезается.
Эффектные кнопки на сайте
В порядке и на условиях, определённых Федеральным законом от 27 июля 2006 года № 152-ФЗ «О персональных данных». Согласие на обработку следующих моих персональных данных: фамилии, имени, отчества, года, месяцы, даты и места рождения, пола, гражданства, места жительства, в том числе сведения о регистрации по месту жительства, месту пребывания, места работы, социального положения (статуса), реквизитов документа, удостоверяющего личность. Обработка моих персональных данных Оператором осуществляется исключительно в целях защиты моих прав на регистрацию доменного имени, услуги по созданию и продвижению сайтов, услуги по размещению рекламных компаний в интернет и обеспечения соблюдения законов и иных нормативных правовых актов, связанных с предоставлением этих услуг. Я предоставляю Оператору право осуществлять следующие действия с моими персональными данными: сбор, систематизация, накопление, хранение, уточнение (обновление, изменение), использование, обезличивание, блокирование, уничтожение персональных данных, передача персональных данных между: — Оператором ООО «КликОН», в котором мне будут осуществляться вышеперечисленные услуги ; — Оператором АНО «Региональный Сетевой Информационный Центр», осуществляющим непосредственную регистрацию доменных имён ; Мне гарантируется конфиденциальность моих персональных при обработке их и хранении не дольше срока, предусмотренного нормативными актами. Настоящие согласие данное мной и действует бессрочно. Я оставляю за собой право отозвать своё согласие посредством составления соответствующего письменного документа, который может быть направлен мной в адрес Оператора по почте заказным письмом с уведомлением о вручении либо вручен лично под расписку уполномоченному представителю Оператора.