Очень простые и удобные по своему стилю кнопки разной гаммой цвета. Где присутствует эффект стрелки, которая при наведение появиться. Идет четыре фактуры цвета, где просто по умолчанию они представлены, так как под каждую кнопку стиль прописан и вы сможете изменить его на свою гамму и чтоб на интернет ресурс отлично подошла. Про тематику пару слов, то как можно заметить, то здесь они могут подойти на любую, что игровая площадка, что собственный блог и возможность поставить на главную страницу.
Одни из многих, где стилистика не изменяется при наведение, а только появляется стрелка и немного продвигает написанный текст. Это можно сделать как функцию "Читать дальше" или просто на софт ресурсе "Скачать" вообщем много где можно применить их. Для начало прописываем стили, и если нужно берем тот, который вам нужен, так как безусловно все разные ставить нелепо будет. И большой плюс, это простота их, как настраивать, что начинающий веб мастер может сделать и где то может стандартный дизайн, который корректируется.
И когда только в
CSS пропишите, то вам только останется код поставить на саму кнопку, там где вы хотите ее видеть.
Приступаем к установке: CSS: Код
@import url(https://fonts.googleapis.com/css?family=Raleway:400,500);
@import url(http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
button.buttonuon {
font-family: 'Raleway', Arial, sans-serif;
border: none;
background-color: #000000;
border-radius: 5px;
color: #ffffff;
cursor: pointer;
padding: 10px 30px;
display: inline-block;
margin: 15px 30px;
text-transform: uppercase;
line-height: 1.5em;
font-weight: 400;
font-size: 1em;
outline: none;
position: relative;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
button.buttonuon span {
display: inline-block;
-webkit-transition: all 0.3s;
transition: all 0.3s;
opacity: 0.8;
}
button.buttonuon i {
font-size: 21px;
left: 22px;
position: absolute;
opacity: 0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
button.buttonuon:hover span,
button.buttonuon.hover span {
-webkit-transform: translate3d(10px, 0px, 0px);
transform: translate3d(10px, 0px, 0px);
opacity: 1;
}
button.buttonuon:hover i,
button.buttonuon.hover i {
opacity: 0.8;
}
button.buttonuon:active span {
-webkit-transform: translate3d(14px, 0px, 0px);
transform: translate3d(14px, 0px, 0px);
}
button.buttonuon:active i {
left: 18px;
}
button.buttonuon.blue {
background-color: #20638f;
}
Код
<button class="buttonuon blue"><span>Читать далее</span><i class="ion-android-arrow-forward"></i></button>
Не выводит сообщения в чат.
Игор приносим свои извинения за предоставленные не удобства, сайт проходит перекваливфикацыю, по эт
Спасибо, вы не виноват, эта все zornet не указывает авторов и источник, если ему так написать то ба
