A можно ли первый вариант кнопок приспособить не к парным, так сказать, сочетаниям кнопок, а к тройным? Вот пример на картинке
Хочу сделать так, чтобы по краям закругленные кнопки были, а по центру прямоугольная И как сменить цвет кнопок, а то зелёные как-то не особо подходят под subsilver?
Все наши кнопки, это обычные теги <a>. Каждой кнопке присвоен свой класс, который и формирует её отображение. Всё очень просто и понятно.
Структура наших кнопок:
Здесь у нас 2 класса:
CSS структура наших кнопок:
Структура наших кнопок:
То есть присваиваем тегу
Структура этих кнопок следующая:
Этот пример, скорее не кнопки, а текст с 3D эффектом.
Класс для этого примера у нас
Очень простой CSS:
Самый на мой взгляд интересный пример, круглая кнопка, которая при наведении на неё мыши поворачивается и выравнивает текст.
Структура у неё следующая:
CSS:
Структура наших кнопок:
Код: Выделить всё
<a href="#" class="pager1">← новые сообщения</a><a href="#" class="pager2">старые сообщения →</a>
pager1
- кнопка с закруглением слеваpager2
- кнопка с закруглением справаCSS структура наших кнопок:
Код: Выделить всё
a.pager1:link, a.pager1:visited {
font: 14px/26px MisoRegular;
letter-spacing: 1px;
text-shadow: #1C9328 0 -1px 0;
color: #fff;
background-color: #444;
display: inline-block;
margin-right: 1px;
padding-right: 15px;
padding-left: 15px;
-moz-border-radius: 13px 0 0 13px;
-webkit-border-radius: 13px 0 0 13px;
border-radius: 13px 0 0 13px;
background: -moz-linear-gradient(top, rgba(135,185,0,1) 0%, rgba(51,134,8,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(135,185,0,1)), color-stop(100%,rgba(51,134,8,1)));
background: -webkit-linear-gradient(top, rgba(135,185,0,1) 0%,rgba(51,134,8,1) 100%);
background: -o-linear-gradient(top, rgba(135,185,0,1) 0%,rgba(51,134,8,1) 100%);
background: linear-gradient(top, rgba(135,185,0,1) 0%,rgba(51,134,8,1) 100%)
-moz-box-shadow: rgba(0,0,0,1) 0px 2px 1px;
-webkit-box-shadow: rgba(0,0,0,1) 0px 2px 1px;
box-shadow: rgba(0,0,0,1) 0px 2px 1px;
}
a.pager2:link, a.pager2:visited {
font: 14px/26px MisoRegular;
letter-spacing: 1px;
text-shadow: #1C9328 0 -1px 0;
color: #fff;
background-color: #444;
display: inline-block;
padding-right: 15px;
padding-left: 15px;
-moz-border-radius: 0 13px 13px 0;
-webkit-border-radius: 0 13px 13px 0;
border-radius: 0 13px 13px 0;
background: -moz-linear-gradient(top, rgba(135,185,0,1) 0%, rgba(51,134,8,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(135,185,0,1)), color-stop(100%,rgba(51,134,8,1)));
background: -webkit-linear-gradient(top, rgba(135,185,0,1) 0%,rgba(51,134,8,1) 100%);
background: -o-linear-gradient(top, rgba(135,185,0,1) 0%,rgba(51,134,8,1) 100%);
background: linear-gradient(top, rgba(135,185,0,1) 0%,rgba(51,134,8,1) 100%)
-moz-box-shadow: rgba(0,0,0,1) 0px 2px 1px;
-webkit-box-shadow: rgba(0,0,0,1) 0px 2px 1px;
box-shadow: rgba(0,0,0,1) 0px 2px 1px;
}
a.pager1:hover, a.pager2:hover {
line-height: 22px;
padding-right: 13px;
padding-left: 13px;
border: 2px solid #9433FF;
background: -moz-linear-gradient(top, rgba(118,0,249,1) 0%, rgba(65,0,142,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(118,0,249,1)), color-stop(100%,rgba(65,0,142,1)));
background: -webkit-linear-gradient(top, rgba(118,0,249,1) 0%,rgba(65,0,142,1) 100%);
background: -o-linear-gradient(top, rgba(118,0,249,1) 0%,rgba(65,0,142,1) 100%);
background: linear-gradient(top, rgba(118,0,249,1) 0%,rgba(65,0,142,1) 100%);
text-shadow: #37197e 0 -1px 0;
}
a.pager1:active, a.pager2:active {
line-height: 26px;
padding-right: 15px;
padding-left: 15px;
border-style: none;
background: -moz-linear-gradient(top, rgba(65,0,142,1) 0%, rgba(118,0,249,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(65,0,142,1)), color-stop(100%,rgba(118,0,249,1)));
background: -webkit-linear-gradient(top, rgba(65,0,142,1) 0%,rgba(118,0,249,1) 100%);
background: -o-linear-gradient(top, rgba(65,0,142,1) 0%,rgba(118,0,249,1) 100%);
background: linear-gradient(top, rgba(65,0,142,1) 0%,rgba(118,0,249,1) 100%);
}
Код: Выделить всё
<a href="#" class="transparent">CSS 3 Isometric Text</a> <a href="#" class="transparent">Downloads</a> <a href="#" class="transparent">Safari Extensions</a>
<a>
класс transparent
.Структура этих кнопок следующая:
Код: Выделить всё
a.transparent:link, a.transparent:visited {
color: #fff;
padding: 20px 40px;
border-style: none;
background-color: rgba(0,0,0,0);
font: 14px/1 "Lucida Grande", Lucida, Verdana, sans-serif;
text-shadow: #000 0 2px 2px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
display: inline-block;
}
a.transparent:hover {
-moz-box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 4px;
-webkit-box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 4px;
box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 4px;
background-image: -moz-linear-gradient(top, rgba(0,0,0,.1) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.2) 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.1)), color-stop(30%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,.2)));
background-image: -webkit-linear-gradient(top, rgba(0,0,0,.1) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.2) 100%);
background-image: -o-linear-gradient(top, rgba(0,0,0,.1) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.2) 100%);
background-image: linear-gradient(top, rgba(0,0,0,.1) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.2) 100%);
-moz-background-clip: padding-box;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
a.transparent:active {
background: rgba(0,0,0,.3);
-moz-box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 6px;
-webkit-box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 6px;
box-shadow: rgba(255,255,255,.28) 0px 1px 1px, inset rgba(0,0,0,.5) 0 1px 6px;
}
Класс для этого примера у нас
text
:
Код: Выделить всё
<a href="#" class="text">Twitter</a>
Код: Выделить всё
a.text:link, a.text:visited {
color: #fff;
text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
font: 60px/60px 'ChunkFiveRegular';
display: inline-block;
}
a.text:hover {
text-shadow: 0 0 5px #63fdfe, 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
}
a.text:active {
text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 5px 7px #001135;
margin-top: 4px;
line-height: 56px;
color: #dcdcdc;
}
Структура у неё следующая:
Код: Выделить всё
<a href="#" class="round">Случайная<br>Статья</a>
Код: Выделить всё
a.round:link, a.round:visited {
width: 190px;
color: #fff;
font: 28px/30px LeagueGothicRegular;
text-transform: uppercase;
text-shadow: #6f0909 0 -1px 1px;
border: 1px solid #6F0909;
display: inline-block;
padding-top: 70px;
padding-bottom: 60px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
-moz-box-shadow: inset rgba(255,255,255,.8) 0 2px 4px;
-webkit-box-shadow: inset rgba(255,255,255,.8) 0 2px 4px;
box-shadow: inset rgba(255,255,255,.8) 0 2px 4px;
background: -moz-linear-gradient(top, rgba(180,9,9,1) 0%, rgba(111,9,9,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(180,9,9,1)), color-stop(100%,rgba(111,9,9,1)));
background: -webkit-linear-gradient(top, rgba(180,9,9,1) 0%,rgba(111,9,9,1) 100%);
background: -o-linear-gradient(top, rgba(180,9,9,1) 0%,rgba(111,9,9,1) 100%);
background: linear-gradient(top, rgba(180,9,9,1) 0%,rgba(111,9,9,1) 100%);
-moz-background-clip: padding-box;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
-ms-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
transform: rotate(-12deg);
}
a.round:hover {
-moz-box-shadow: rgba(255,255,255,1) 0 0 20px, rgba(255,255,255,1) 0 0 30px, inset rgba(255,255,255,.8) 0 2px 4px;
-webkit-box-shadow: rgba(255,255,255,1) 0 0 20px, rgba(255,255,255,1) 0 0 30px, inset rgba(255,255,255,.8) 0 2px 4px;
box-shadow: rgba(255,255,255,1) 0 0 20px, rgba(255,255,255,1) 0 0 30px, inset rgba(255,255,255,.8) 0 2px 4px;
-moz-transform: rotate(0deg);
-moz-transition: -moz-transform 0.3s ease-out;
-webkit-transform: rotate(0deg);
-webkit-transition: -webkit-transform 0.3s ease-out;
-o-transform: rotate(0deg);
-o-transition: -o-transform 0.3s ease-out;
}
a.round:active {
-moz-box-shadow: rgba(255,255,255,1) 0 0 20px, rgba(255,255,255,1) 0 0 30px , inset rgba(0,0,0,.5) 0 4px 4px;
-webkit-box-shadow: rgba(255,255,255,1) 0 0 20px, rgba(255,255,255,1) 0 0 30px , inset rgba(0,0,0,.5) 0 4px 4px;
box-shadow: rgba(255,255,255,1) 0 0 20px, rgba(255,255,255,1) 0 0 30px , inset rgba(0,0,0,.5) 0 4px 4px;
background: -moz-linear-gradient(top, rgba(111,9,9,1) 0%, rgba(180,9,9,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(111,9,9,1)), color-stop(100%,rgba(180,9,9,1)));
background: -webkit-linear-gradient(top, rgba(111,9,9,1) 0%,rgba(180,9,9,1) 100%);
background: -o-linear-gradient(top, rgba(111,9,9,1) 0%,rgba(180,9,9,1) 100%);
background: linear-gradient(top, rgba(111,9,9,1) 0%,rgba(180,9,9,1) 100%);
-moz-background-clip: padding-box;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
Комментарии: 4
Ага, всё понял Создаём третий класс, например,
Сам вопрос задал, сам на него ответил Маладэс
Итог
pager3
и для него радиус закругления ставим 4-5, например, чтобы кнопка не была угловатая, а цвет в RGBA начальный 135,185,0,1
и финальный 51,134,8,1
меняются на любые свои В общем, класс должен выглядеть примерно так
Код: Выделить всё
a.pager3:link, a.pager3:visited {
font: 14px/26px MisoRegular;
letter-spacing: 1px;
text-shadow: #1C9328 0 -1px 0;
color: #fff;
background-color: #444;
display: inline-block;
margin-right: 1px;
padding-right: 15px;
padding-left: 15px;
-moz-border-radius: 3px 0 0 3px;
-webkit-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
background: -moz-linear-gradient(top, rgba(92,202,248,1) 0%, rgba(16,134,195,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(92,202,248,1)), color-stop(100%,rgba(16,134,195,8,1)));
background: -webkit-linear-gradient(top, rgba(92,202,248,1) 0%,rgba(16,134,195,1) 100%);
background: -o-linear-gradient(top, rgba(92,202,248,0,1) 0%,rgba(16,134,195,1) 100%);
background: linear-gradient(top, rgba(92,202,248,1) 0%,rgba(16,134,195,1) 100%)
-moz-box-shadow: rgba(0,0,0,1) 0px 2px 1px;
-webkit-box-shadow: rgba(0,0,0,1) 0px 2px 1px;
box-shadow: rgba(0,0,0,1) 0px 2px 1px;
}
a.pager3:hover, {
line-height: 22px;
padding-right: 13px;
padding-left: 13px;
border: 2px solid #9433FF;
background: -moz-linear-gradient(top, rgba(118,0,249,1) 0%, rgba(65,0,142,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(118,0,249,1)), color-stop(100%,rgba(65,0,142,1)));
background: -webkit-linear-gradient(top, rgba(118,0,249,1) 0%,rgba(65,0,142,1) 100%);
background: -o-linear-gradient(top, rgba(118,0,249,1) 0%,rgba(65,0,142,1) 100%);
background: linear-gradient(top, rgba(118,0,249,1) 0%,rgba(65,0,142,1) 100%);
text-shadow: #37197e 0 -1px 0;
}
pager3:active {
line-height: 26px;
padding-right: 15px;
padding-left: 15px;
border-style: none;
background: -moz-linear-gradient(top, rgba(65,0,142,1) 0%, rgba(118,0,249,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(65,0,142,1)), color-stop(100%,rgba(118,0,249,1)));
background: -webkit-linear-gradient(top, rgba(65,0,142,1) 0%,rgba(118,0,249,1) 100%);
background: -o-linear-gradient(top, rgba(65,0,142,1) 0%,rgba(118,0,249,1) 100%);
background: linear-gradient(top, rgba(65,0,142,1) 0%,rgba(118,0,249,1) 100%);
Итог
Вот здесь:
перед именем класса должна быть точка и
Код: Выделить всё
pager3:active {
a
, так как применяется к ссылке - a.pager3:active {
, плюс в конце закрытие - }
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Похожие темы
-
Всегда интересовал этот вопрос,почему ссылка автоматически врезается так что по средине становятся точки.
Если нужно чтоб ссылка была видимой...