как расположить кнопку по центру сыы

background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);

box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;

border-bottom-right-radius: 5px;

border-top-right-radius: 5px;

background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);

border-left:solid 1px #2ab7ec;

font-family: 'Open Sans', sans-serif;

}Второй примерСтилиОпять таки, начнем с легкой части. Обратите внимание на то, что здесь появился отступ. Он необходим для компенсирования ширины псевдо-элемента, если нужно расположить кнопку по центру. Если же не нужно, то отступ можно не использовать..a_demo_three {

box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;

}Теперь сделаем серый контейнер вокруг кнопки, используя псевдо-элемент ::before. Абсолютное позиционирование сделает нашу жизнь легче при позиционировании самого элемента..a_demo_one::before {

background-image: linear-gradient(bottom, rgb(171,27,27) 100%, rgb(212,51,51) 0%);

background-image: linear-gradient(bottom, rgb(171,27,27) 0%, rgb(212,51,51) 100%);

border: solid 1px #831212;

font-family: 'Open Sans', sans-serif;

</a>СтилиПрежде всего, зададим основные стили для кнопки в обычном и активном состоянии. Обратите внимание, что кнопка позиционирована относительно. Это поможет при позиционировании элемента ::before:.a_demo_one {

Первый примерHTML<a href="#" class="a_demo_one">

CSS кнопки с помощью псевдо-элементов

 Чужой компьютер

Загрузка. Пожалуйста, подождите...

CSS кнопки с помощью псевдо-элементов » Jerry's blog