Каждый веб мастер хочет сделать свой сайт стильным, для этого пригодиться красивая кнопка с эффектами CSS 3. Моя красивая кнопка с эффектами CSS 3, при клике на нее создает эффект нажатия. И так что нужно что у нас получилась красивая кнопка с эффектами CSS 3? На самом деле совсем немножно, кода, стиля и желание.
Вот как она будет выглядеть красивая кнопка с эффектами CSS 3, на рис.1 вы ведите 1 кнопку в 2 состаяниях, в спокойном и в нажатом состояниях:
красивая кнопка с эффектами CSS 3
рис.1
Для того что б сделать кнопку с эффектами CSS 3, на понадобиться index.html и styles.css. Как создать index.html, и подключить к нему styles.css, читайте в CSS 3 и HTML 5 с нуля (Урок №1)
Откройте пустой index.html и скопируйте туда код кнопки:
<!doctype html> <head> <meta charset="UTF-8"> <title>Уроки от WCDT</title> <link rel="stylesheet" type="text/css" href="css/styles.css"/> </head> <body> <a href="#" class="a_demo_one">Моя кнопка</a> </body> </html>
красивая кнопка с эффектами CSS 3, получила клас под именем a_demo_one
Вы наверное заметили, что класс a_demo_one, повтаряеться несколько раз. Конкретнее, кнопка с эффектами CSS 3, имеет стиль из трех частей:
- a_demo_one — стиль кнопки в спокойном состаяние;
- a_demo_one:hover — дополнительный стиль кнопки при наведение на нее курсора, тень и рамка темнеют (:hover — определяет стиль элемента при наведении на него курсора мыши, но при этом элемент еще не активирован, иными словами кнопка мыши не нажата.);
- a_demo_one:active — это стиль кнопки при нажатие, в нем цвета градиента, меняются местами, создавая илюзию нажатия (:active — псевдокласс, определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.);
Откройте styles.css, и скопируйте туда стиль кнопки:
body {background:#fff;text-align:center;} @charset "UTF-8"; .a_demo_one { top:10px; border: 1px solid #4C9E00; border-radius: 5px 5px 5px 5px; box-shadow: 0 1px 0 #BFD255 inset, 0 1px 0 #BFD255; color: #FFFFFF; text-shadow: 1px 1px 1px rgba(100, 100, 100, 1); font-family: 'Open Sans',sans-serif; font-size: 16px; padding: 15px 20px; position: absolute; text-decoration: none; background-image: linear-gradient(top, rgb(157,188,77) 0%, rgb(114,170,0) 100%); background-image: -o-linear-gradient(top, rgb(157,188,77) 0%, rgb(114,170,0) 100%); background-image: -moz-linear-gradient(top, rgb(157,188,77) 0%, rgb(114,170,0) 100%); background-image: -webkit-linear-gradient(top, rgb(157,188,77) 0%, rgb(114,170,0) 100%); background-image: -ms-linear-gradient(top, rgb(157,188,77) 0%, rgb(114,170,0) 100%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(157,188,77)), color-stop(1, rgb(114,170,0)) ); } .a_demo_one:hover { color: #fff; text-shadow: 1px 1px 1px rgba(50, 50, 50, 1); } .a_demo_one:active { top:10px; border: 1px solid #4C9E00; border-radius: 5px 5px 5px 5px; box-shadow: 0 1px 0 #BFD255 inset, 0 1px 0 #BFD255; color: #FFFFFF; font-family: 'Open Sans',sans-serif; font-size: 16px; padding: 16px 20px 14px 20px; position: absolute; text-decoration: none; background-image: linear-gradient(top, rgb(157,188,77) 0%, rgb(114,170,0) 100%); background-image: -o-linear-gradient(top, rgb(157,188,77) 0%, rgb(114,170,0) 100%); background-image: -moz-linear-gradient(top, rgb(157,188,77) 0%, rgb(114,170,0) 100%); background-image: -webkit-linear-gradient(top, rgb(157,188,77) 0%, rgb(114,170,0) 100%); background-image: -ms-linear-gradient(top, rgb(157,188,77) 0%, rgb(114,170,0) 100%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(157,188,77)), color-stop(1, rgb(114,170,0)) }
красивая кнопка с эффектами CSS 3
красивая кнопка с эффектами CSS 3, благодаря градиенту при клике, создает эффект нажатие. Делая кнопку по этому уроку, вы можете использовать другой градиент, но помните в стиле active, нужно поменять местами цвета градиента. Также и не забудьте поменять цвет border и box-shadow , соответственно к вашему градиенту. Градиент можете ссоздать с помощью CSS 3 в онлайн генераторе, или с помощью рисунка, точнее двух 1px рисунков. В стиле кнопки в спокойном состаяние разножаете 1px рисунок ррадиента по горизонтали, а в стиле актив, используете такойже 1px рисунок но перевернутый верх ногами . Детальние, как это сделать, читайте статье Как сделать градиентный background (фон) с помощью 1px рисунка и с помощью только CSS 3
3 Response Comments
градиент на кнопке лучше делать картинкой — с css кода очень много, еще и ие не все сожрет.
Цікава стаття. Не погоджуюсь з попереднім коментарем, адже css менше впливає на загрузку сторінок ніж велика кількість зображень.
Очень замусоренный код. Весь эффект кнопки сводится к смене цвета текста.
Из серии «Как написать Терабайтный сайт».