Недавно в одном из шаблонов WordPress, я наткнулась на очень удачное и простое решение кнопка CSS3. И поспешила добавить ее в свою коллекцию CCS3 кнопок. Выглядят кнопки так:
В кнопках плавно сменяется один цвет на другой. Просто и красиво.
Чтобы на вашем сайте появилась такая кнопка, прежде всего вставьте CSS стиле в файл со стилями Вашего сайта:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
/*Кнопка с плавным переходом*/ .button_slow{ margin: 20px; padding: 10px 20px; border: 0px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius:4px; font-size: 14px; -moz-appearance: none !important; -webkit-appearance: none !important; appearance: none !important; cursor: pointer; display:inline-block; color: #FFFFFF!important; text-decoration:none; } .button_slow:hover {text-decoration:none!important;} .red_slow {background-color: red; /*исходный цвет*/ transition: background-color 0.5s linear 0s;} .red_slow:hover {background-color: #33363B;/*цвет перехода*/} .green_slow {background-color: green; /*исходный цвет*/ transition: background-color 0.5s linear 0s;} .green_slow:hover {background-color: #33363B;/*цвет перехода*/ } |
В данных стилях параметры кнопки заданы в стиле button-slow, а цвета вынесены отдельно: красный (red_slow) и зеленый (green_slow). В каждом есть background-color — это цвет кнопки.
Исходный цвет — изначальный цвет кнопки;
Цвет перехода — цвет после наведения курсора мышки.
Изменяя эти цвета, вы можете создать свои собственные цветовые решения для сайта.
HTML самой кнопки очень прост. Это ссылка, к которой добавлен класс slowbutton:
|
1 |
<a href="/" class="button_slow green_slow">Button</a> |
В этом html в классе (class=»button_slow и green_slow») два стиля. button_slow нужно вставлять всегда, а цвет вставляейте тот, который вам нужен, или из примера (зеленый или красный) или ваш индивидуальный.