Как сделать красивую кнопку css

HTML + CSS Кнопки на сайт

Хотите знать как сделать красивую HMML кнопку для сайта? Тогда вы попали по адресу. В данной статье я представлю вам 24 различных вариантов создания красивых и стильных кнопок для вашего сайта.

Ниже представлены варианты HTML кода кнопок для вашего сайта:

Как сделать кнопку на сайте

Кнопка для сайта 1 вариант

Это наиболее простой вариант кнопки с изменением цвета при наведении курсора на кнопку.

Кнопка для сайта 2 вариант

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

Кнопка для сайта 3 вариант

При наведении кнопка меняет свой цвет и появляются движущиеся рамки.

Кнопка для сайта 4 вариант

Кнопка для сайта 5 вариант

Здесь представлена кнопка с анимацией полос сверху и снизу при наведении.

Кнопка для сайта 6 вариант

Вариант кнопки с движущейся тенью при наведении.

Кнопка для сайта 7 вариант

Еще одна кнопка с красивым визуальным эффектом при наведении курсора. Движущиеся рамки при наведении.

Кнопка для сайта 8 вариант

Вариант похожий на предыдущий но кнопка имеет другое цветовое исполнение.

Кнопка для сайта 9 вариант

Кнопка с эффектом поворота заливки при наведении.

Кнопка для сайта 10 вариант

Еще один интересный эффект при наведении на кнопку

Кнопка для сайта 11 вариант

Эффект блика на кнопке с использование CSS

Кнопка для сайта 12 вариант

3D кнопка с эффектом разворота по вертикали.

Кнопка для сайта 13 вариант

Кнопка с вертикальным бликом при наведении.

Кнопка для сайта 14 вариант

Изменение цвета кнопки при наведении. Эффект скольжения цвета снизу вверх.

Кнопка для сайта 15 вариант

Кнопка с изменение цвета но только теперь со скольжение по горизонтали.

Кнопка для сайта 16 вариант

Ещё одна кнопка с движение тени при наведении.

Редактирование Размеров и геометрии кнопок.

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

Рассмотрим подобный случай на примере первой кнопки.

Вам нужно найти в css коде подобное:

 width: 130px; height: 40px;

Это фрагмент кода отвечающий за размер кнопки. Давайте сделаем ее немного шире и длиннее для этого изменим количество пикселей вот так:

 width: 150px; height: 60px;

А также можем поменять закругление самой кнопки для этого нужно найти еще вот такой отрывок кода:

border-radius: 5px;

и поменять его, допусти на значение 30px

И вот что у нас получилось

Кнопка для сайта 17 вариант с (закруглением)

Кнопки с необычным дизайном

Кнопка для сайта 18 вариант (купить)

Кнопка купить как в Эльдорадо

Кнопка для сайта 19 вариант (скачать)

Кнопка скачать с эффектом подсвечивания.

Кнопка для сайта 20 вариант (как из стекла)

Кнопка как будто бы сделана из стекла подходит только для цветного фона.

Кнопка для сайта 21 вариант (объемная)

Кнопка для сайта 22 вариант (3D)

Интересный вариант 3D CSS кнопки

Кнопка для сайта 23 вариант

Кнопка с бегущими полосами при наведении

Кнопка для сайта 24 вариант

Css код кнопки с появление еще одной окантовки при наведении курсора

Код кнопки расчета с ссылкой на whatsapp

По просьбе человека оставившего комментарий

*Без корректного номера внесенного в код ссылка работать не будет

Заключение:

Вот только небольшой перечень Html и css кодов кнопок на сайт.

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

В общем дерзайте. Если будут вопросы пишите в коментариях.

Не справились сами?

Звоните мне! Беру от 1000 рублей за час работы.

Кастомизация кнопки

Решил сделать красивую кнопку с помощью PyQt5 и CSS. Начал делать сам, но результат не понравился. Нашел пару сайтов ( https://codepen.io/caraujo/pen/VYOjNM и https://codepen.io/thejamespower/pen/OVNYLL ). Не как не могу изменить вид кнопки на те которые хочу, так как выскакивают ошибки ( например Could not parse stylesheet of object QPushButton(0x21f7f28f590, name = «pushButton» ). Из первого сайта ( https://codepen.io/caraujo/pen/VYOjNM ) я хотел был взять кнопку Burn. Она имеет эффект свечения надписи при наведении курсора Из второго сайта ( https://codepen.io/thejamespower/pen/OVNYLL ) — кнопку Skew Fill Left -> Right. Она имеет анимацию заполнения кнопки слева направо при наведении курсора.

from PyQt5 import QtCore, QtGui, QtWidgets class Ui_Form(object): def setupUi(self, Form): Form.setObjectName("Form") Form.resize(800, 595) font = QtGui.QFont() font.setFamily("Century Gothic") Form.setFont(font) self.pushButton = QtWidgets.QPushButton(Form) self.pushButton.setGeometry(QtCore.QRect(600, 480, 191, 61)) self.pushButton.setStyleSheet(pushButton_StyleSheet) self.pushButton.setObjectName("pushButton") pushButton_StyleSheet = ''' #pushButton < color: #fff; background-color: #78a4e8; border: none; border-radius: 15px; >#pushButton:hover #pushButton:pressed < background-color: #686c73; >''' if __name__ == "__main__": import sys app = QtWidgets.QApplication(sys.argv) Form = QtWidgets.QWidget() ui = Ui_Form() ui.setupUi(Form) Form.show() sys.exit(app.exec_()) 

Отслеживать

задан 18 авг 2021 в 8:39

193 1 1 серебряный знак 8 8 бронзовых знаков

Попробуйте написать вместо pushButton <> написать QPushButton <>

18 авг 2021 в 8:47

Gidra постарайтесь как-то лучше объяснить и показать какую красивую кнопку вы хотите сделать.

18 авг 2021 в 8:55

@S.Nick мне ещё надо что-то добавить в вопрос? Если дано, постараюсь добавить что-то ещё

18 авг 2021 в 9:23

18 авг 2021 в 10:53

Gidra может быть такая реализация будет полезна для вас ru.stackoverflow.com/questions/1360863/…

19 дек 2021 в 22:21

0

Сортировка: Сброс на вариант по умолчанию

Знаете кого-то, кто может ответить? Поделитесь ссылкой на этот вопрос по почте, через Твиттер или Facebook.

• python
• css
• python-3.x
• pyqt5

Как создать красивую кнопку в Elementor

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

Wir sind für Sie da

Copyright © 2019 — 2023

Мы используем файлы Cookies. Чтобы гарантировать полноценную работу сайта, необходимо дать согласие на использование Cookies. Настройки CookieСогласен

Privacy & Cookies Policy

Настройка конфиденциальности

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

Необходимые

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

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

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

Функциональные

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

Необязательные

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

Прочие файлы cookie без категорий — это те, которые анализируются и еще не были отнесены к категории.

Производительность

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

Генератор кнопки css

Чтобы получить готовый css код кнопки нажми на нее и скопируй.

Скопировать код кнопок css

Все параметры кнопки

Размер кнопки
Размер шрифта
Закруглить края кнопки
Верхний цвет градиента кнопки
Нижний цвет градиента кнопки
Полоса сверху кнопки
Цвет кнопки при наведении
Цвет текста
Цвет текста после наведения
Цвет кнопки при нажатии

Выбери шрифт у кнопки

Как сделать кнопку в генераторе css

Чтобы сделать красивую кнопку css воспользуемся генератором. У кнопки есть параметры.

• Размер кнопки css. Изменяем форму кнопки высоту и ширину кнопки.
• Размер текста у кнопки. Задается свойством font-size.
• Закругление краев. Если нужна круглая кнопка используем свойство border-radius: 50%.

Зададим все цвета кнопки css.

1. Верхний цвет градиента. Установим цвет в позиции top.
2. Нижний цвет градиента. Задаем в позиции bottom.
3. Полоса сверху кнопки. Дополнительная функция украшения.
4. Цвет при наведении. Используем класс hover.
5. Цвет текста. Подбираем цвет контрастный цвету кнопки.
6. Цвет текста кнопки после наведения. Если изменим фон со светлого на темный, то и цвет должен стать другим.
7. Цвет кнопки при нажатии. Установим третий цвет для класса active.

После установки всех параметров наживаем на скопировать код кнопки css и переносим в проект. В файле индекса зададим html код для кнопки с классом button. Теперь можно с генерировать тень box shadow и добавить ее при наведении на кнопку, получится красивый эффект.

оформление кнопок css

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

1. &:active момент нажатия на кнопку добавляем свойство изменение цвета.
2. &:hover навели курсор мышки на кнопку и она изменила цвет текста и фона.

• Чтобы сделать кнопку по центру используем свойство margin: 0 auto. Подробно о позиционирование элементов написано тут.
• Можно сделать красивую кнопку с анимацией, читать тут.
• Как сделать каркас для кнопки в html можно прочитать тут.

Примеры красивых кнопок css

Рассмотрим стили css у 12 разных видов кнопок.

Прозрачная кнопка css

Оформить Прозрачная кнопка

button.button11 color:#fff; line-height: 32px; border: 0px; text-align: center; width: 100px; border-radius:16px; background:transparent; background-image: -webkit-linear-gradient(#127009, #3b9932, #409e37); background-image: -moz-linear-gradient(#127009, #3b9932, #409e37); background-image: -o-linear-gradient(#127009, #3b9932, #409e37); -moz-box-shadow: inset 0 0 7px rgba(0,0,0,0.5); -webkit-box-shadow: inset 0 0 7px rgba(0,0,0,0.5); -o-box-shadow: inset 0 0 7px rgba(0,0,0,0.5); box-shadow: inset 0 0 7px rgba(0,0,0,0.5); display: block; text-decoration: none; font-size: 14px; padding: 0px; > button.button1:before

Ку Вторая прозрачная кнопка

button.button2 < color:#fff; line-height: 48px; border: 0px; text-align: center; width: 48px; border-radius:24px; background:transparent; background-image:-moz-radial-gradient(center bottom, circle cover, rgba(16, 236, 236, 1) 20%, rgba(0, 44, 228, 1) 80%); background-image:-webkit-radial-gradient(center bottom, circle cover, rgba(16, 236, 236, 1) 20%, rgba(0, 44, 228, 1) 80%); background-image:-o-radial-gradient(center bottom, circle cover, rgba(16, 236, 236, 1) 20%, rgba(0, 44, 228, 1) 80%); display: block; padding: 0px; text-decoration: none; >button.button2:before < content: "."; color:transparent; line-height: 24px; width: 40px; margin-left: 4px; margin-bottom: -24px; background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) ); background-image:-moz-linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0)); background-image: -o-linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0)); border-radius:24px; display:block; >>

Заказать Кнопка с деформацией

button.button3 < border-radius: 10px; border: none; padding: 10px 10px 14px 10px; color: #111; border-radius: 10px; font-size: 1.2em; font-weight: 200; transition: all 0.2s; margin: 5px; border-bottom: 0px solid #eee; cursor:pointer; >button.button3:active < transform: scaleX(0.9) translateY(4px); >button.button3.green < background: #82CA9D; >button:not(:active)

Заказать Стиль кнопки с изменением положения

button.button4 < text-decoration: none; outline: none; display: inline-block; width: 140px; height: 45px; line-height: 45px; border-radius: 45px; margin: 10px 20px; font-size: 11px; text-transform: uppercase; text-align: center; letter-spacing: 3px; font-weight: 600; color: #524f4e; background: white; box-shadow: 0 8px 15px rgba(0,0,0,.1); transition: .3s; >button.button4:hover

Заказать Стиль с бликом

button.button5 < text-decoration: none; outline: none; display: inline-block; padding: 12px 40px; margin: 10px 20px; border-radius: 30px; background-image: linear-gradient(45deg, #6ab1d7 0%, #33d9de 50%, #002878 100%); background-position: 100% 0; background-size: 200% 200%; font-size: 24px; font-weight: 300; color: white; box-shadow: 0 16px 32px 0 rgba(0,40,120,.35); transition: .5s; >button.button5:hover

Заказать Кнопка с цветовой полосой

button.button6 < text-decoration: none; outline: none; display: inline-block; margin: 10px; color: white; box-shadow: 0 0 0 2px white; padding: 20px 0; width: 150px; text-align: center; text-transform: uppercase; letter-spacing: 3px; position: relative; overflow: hidden; >span < position: relative; z-index: 5; >button.button6:before, button.button6:after < content: ""; position: absolute; top: 0; bottom: 0; right: 0; left: 0; >button.button6:before < transform: translateX(-100%); background: white; transition: transform .3s cubic-bezier(.55,.055,.675,.19); >button.button6:after < background: #413ad5; transform: translateX(100%); transition: transform .3s cubic-bezier(.16,.73,.58,.62) .3s; >button.button6:hover:before, button.button6:hover:after

Заказать Кнопка с объемным цветом

button.button7 < text-decoration: none; outline: none; display: inline-block; padding: 15px 30px; margin: 10px 20px; border-radius: 10px; box-shadow: 0 0 40px 40px #F137A6 inset, 0 0 0 0 #F137A6; font-weight: bold; letter-spacing: 2px; color: white; transition: .15s ease-in-out; >button.button7:hover

Заказать Кнопка с бликом

button.button8 < text-decoration: none; outline: none; display: inline-block; padding: 10px 30px; margin: 10px 20px; position: relative; overflow: hidden; border: 2px solid #fe6637; border-radius: 8px; color: #fe6637; transition: .2s ease-in-out; >button.button8:before < content: ""; background: linear-gradient(90deg, rgba(255,255,255,.1), rgba(255,255,255,.5)); height: 50px; width: 50px; position: absolute; top: -8px; left: -75px; transform: skewX(-45deg); >button.button8:hover < background: #fe6637; color: #fff; >button.button8:hover:before

Стеклянная кнопка

Заказать Стиль стеклянной кнопки

button.button9 < position: relative; display: inline-block; color: #777674; font-weight: bold; text-decoration: none; text-shadow: rgba(255,255,255,.5) 1px 1px, rgba(100,100,100,.3) 3px 7px 3px; user-select: none; padding: 1em 2em; outline: none; border-radius: 3px / 100%; background-image: linear-gradient(45deg, rgba(255,255,255,.0) 30%, rgba(255,255,255,.8), rgba(255,255,255,.0) 70%), linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 90%, rgba(255,255,255,.3)), linear-gradient(to right, rgba(125,125,125,1), rgba(255,255,255,.9) 45%, rgba(125,125,125,.5)), linear-gradient(to right, rgba(125,125,125,1), rgba(255,255,255,.9) 45%, rgba(125,125,125,.5)), linear-gradient(to right, rgba(223,190,170,1), rgba(255,255,255,.9) 45%, rgba(223,190,170,.5)), linear-gradient(to right, rgba(223,190,170,1), rgba(255,255,255,.9) 45%, rgba(223,190,170,.5)); background-repeat: no-repeat; background-size: 200% 100%, auto, 100% 2px, 100% 2px, 100% 1px, 100% 1px; background-position: 200% 0, 0 0, 0 0, 0 100%, 0 4px, 0 calc(100% - 4px); box-shadow: rgba(0,0,0,.5) 3px 10px 10px -10px; >button.button9:hover < transition: .5s linear; background-position: -200% 0, 0 0, 0 0, 0 100%, 0 4px, 0 calc(100% - 4px); >button.button9:active

3d кнопка css

Заказать Стиль 3d кнопки

button.button10 < position: relative; display: inline-block; font-weight: bold; color: #000; text-decoration: none; text-shadow: -2px 2px rgba(255,255,255,.3); line-height: 1.1; padding: .5em 3em .5em .6em; background: linear-gradient(#ecc92b, #fce25b); box-shadow: 0 0 0 1px #fce25b inset, -1px 0px rgb(220,195,35), -1px 1px rgb(192,167,7), -2px 1px rgb(219,194,34), -2px 2px rgb(191,166,6), -3px 2px rgb(218,193,33), -3px 3px rgb(190,165,5), -4px 3px rgb(217,192,32), -4px 4px rgb(189,164,4), -5px 4px rgb(216,191,31), -5px 5px rgb(188,163,3), -6px 5px rgb(215,190,30), -6px 6px rgb(187,162,2), -7px 6px rgb(214,189,29), -7px 7px rgb(186,161,1), -8px 7px rgb(213,188,28), -8px 8px rgb(185,160,0), -7px 9px 1px rgba(0,0,0,.4), -5px 11px 1px rgba(0,0,0,.2), -1px 13px 4px rgba(0,0,0,.2), 4px 16px 7px rgba(0,0,0,.3); transition: .4s; >button.button10:active < box-shadow: none; -webkit-transform: translate(-7px, 8px); transform: translate(-7px, 8px); >button.button10:after < content: ""; position: absolute; top: calc(50% - .6em/2); right: .6em; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); border: .37em solid; border-top: none; border-left: none; width: .6em; height: .6em; box-shadow: inset -2px 2px rgba(255,255,255,.3); >button.button10:active

Выпадающая кнопка css

Цена 5 р. Код для выпадающей кнопки css

button.button11 < color: #FFFFFF; text-decoration: none; >button.button11 < background:#80a9da; background:-webkit-gradient(linear,left top,left bottom,color-stop(#80a9da,0),color-stop(#6f97c5,1)); background:-webkit-linear-gradient(top, #80a9da 0%, #6f97c5 100%); background:-moz-linear-gradient(top, #80a9da 0%, #6f97c5 100%); background:-o-linear-gradient(top, #80a9da 0%, #6f97c5 100%); background:linear-gradient(top, #80a9da 0%, #6f97c5 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#80a9da', endColorstr='#6f97c5',GradientType=0 ); padding-left:20px; padding-right:80px; height:38px; display:block; margin: 20px auto; text-align:center; width:200px; position:relative; border:1px solid #5d81ab; -webkit-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); -moz-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); 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); -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; overflow:hidden; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; transition:all 0.3s linear; >.a-btn-3-text < padding-top:5px; display:block; width:0px; font-size:18px; white-space:nowrap; text-shadow:0px 1px 1px rgba(255,255,255,0.3); color:#446388; -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -o-transition:all 0.2s linear; transition:all 0.2s linear; >.a-btn-3-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; -webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset; -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset; box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset; -webkit-transition:width 0.3s linear; -moz-transition:width 0.3s linear; -o-transition:width 0.3s linear; transition:width 0.3s linear; >.a-btn-3-icon-right < position:absolute; right:0px; top:0px; height:100%; width:52px; border-left:1px solid #5d81ab; -webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset; -moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset; box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset; >.a-btn-3-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%; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; transition:all 0.3s linear; >.button11:hover < padding-right:140px; -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2); -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2); box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2); >.button11:hover .a-btn-3-text < text-shadow:0px 1px 1px #5d81ab; color:#fff; >.button11:hover .a-btn-3-slide-text < width:57px; >.button11:hover .a-btn-3-icon-right span < opacity:1; >.button11:active

Пульсирующая кнопка css

Заказать Стиль в css для пульсирующей кнопки

button.button12 < position: relative; display:block; color: #ED5B00; text-decoration: none; margin: 20px auto; text-decoration:none; text-align:center; width:125px; font-family: verdana; font-size: 22px; letter-spacing: 2px; border-bottom: 2px solid transparent; >button.button12:hover,button.button12:focus < outline: none; border-bottom: 2px solid #eee; >button.button12:before, button.button12:after < position: absolute; top: 50%; left: 50%; width: 70px; height: 70px; border: 12px double rgba(0,0,0,0.1); border-radius: 50%; content: ''; opacity: 0; -webkit-transform: translateX(-50%) translateY(-50%) scale(0.2); -moz-transform: translateX(-50%) translateY(-50%) scale(0.2); transform: translateX(-50%) translateY(-50%) scale(0.2); >button.button12:after < width: 60px; height: 60px; border-width: 6px; -webkit-transform: translateX(-50%) translateY(-50%) scale(0.8); -moz-transform: translateX(-50%) translateY(-50%) scale(0.8); transform: translateX(-50%) translateY(-50%) scale(0.8); >button.button12:hover:before, button.button12:hover:after < -webkit-animation: pulsate 1.2s infinite; -moz-animation: pulsate 1.2s infinite; -ms-animation: pulsate 1.2s infinite; animation: pulsate 1.2s infinite; >@-webkit-keyframes pulsate < 30%< opacity: 1; -webkit-transform: translateX(-50%) translateY(-50%) scale(1); >100% < opacity: 0.3; -webkit-transform: translateX(-50%) translateY(-50%) scale(0.5); >> @-moz-keyframes pulsate < 30%< opacity: 1; -moz-transform: translateX(-50%) translateY(-50%) scale(1); >100% < opacity: 0.3; -moz-transform: translateX(-50%) translateY(-50%) scale(0.5); >> @-ms-keyframes pulsate < 30%< opacity: 1; -ms-transform: translateX(-50%) translateY(-50%) scale(1); >100% < opacity: 0.3; -ms-transform: translateX(-50%) translateY(-50%) scale(0.5); >> @-keyframes pulsate < 30%< opacity: 1; transform: translateX(-50%) translateY(-50%) scale(1); >100% < opacity: 0.3; transform: translateX(-50%) translateY(-50%) scale(0.5); >>