Дрессируем Lj-cut

[yoksel]

Подумалось тут, что мне не нравится как выглядит ссылка на кат.
Но у нас же есть Css? : ) Посмотрим что можно сделать:

Простая серая кнопочка:



/*----- LJCUT -----*/

b.ljcut-link{
display: inline-block;
padding: 3px 10px;
border: 1px solid #CCC;
border-radius: 5px;
box-shadow: 0px 1px 0 rgba(0,0,0,0.2);
background: #DDD;
}

.ljcut-brace {
display: none;
}

b.ljcut-link A {
text-shadow: 1px 1px 0 rgba(255,255,255,0.7);
text-decoration: none;
}

b.ljcut-link:hover{
border: 1px solid #BBB;
border-radius: 5px;
box-shadow: 0 0 3px 0px rgba(0,0,0,0.3);
background: #CCC;
color: #CCC;
}

b.ljcut-link:hover A {
color: #222 !important;
}

Кнопку можно красить:



/*----- LJCUT -----*/

b.ljcut-link {
display: inline-block;
padding: 3px 10px;
border: 1px solid #B2C47F;
border-radius: 5px;
box-shadow: 1px 1px 0 0 #A7CC43;
background: #B8D666;
}

.ljcut-brace {
display: none;
}

b.ljcut-link A {
text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
text-decoration: none;
color: #FFF;
}

b.ljcut-link:hover{
border: 1px solid #99B255;
border-radius: 5px;
box-shadow: 0 0 2px 0px rgba(0,0,0,0.2);
background: #A7CC43;
color: #B2C47F;
}

b.ljcut-link:hover A {
text-shadow: 0 0 2px rgba(0,0,0,0.4);
color: #FFF !important;
}

А можно и вот так! : )



/*----- LJCUT -----*/

b.ljcut-link {
display: inline-block;
padding: 5px 10px;
border: 1px solid #F90;
border-radius: 5px;
box-shadow: 0 0 2px 0px rgba(0,0,0,0.2);
background: #FC0 url(http://img-fotki.yandex.ru/get/6312/5091629.76/0_64fbc_2db58e02_orig) no-repeat 5px;
}

.ljcut-brace {
display: none;
}

b.ljcut-link A {
padding: 0 0 0 19px;
text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
text-decoration: none;
color: #FFF;
}

b.ljcut-link:hover{
border: 1px solid #F90;
border-radius: 5px;
box-shadow: 0 0 2px 0px rgba(0,0,0,0.2);
background-color: #FCB000;
color: #FCB000
}

b.ljcut-link:hover A {
text-shadow: 0 0 1px rgba(0,0,0,0.7);
color: #FFF !important;
}

Так же можно сделать градиент на кнопках, заменить весь текст на большую картинку и придумать много всяких других интересных штук!

Чтобы использовать понравившуюся кнопку, скопируйте коды и вставьте их на эту страницу http://www.livejournal.com/customize/options.bml?group=customcss в большое текстовое поле.
Если у вас там есть другие коды - вставьте эти в самый конец.

Я думаю что у некоторых фантазия уже разыгралась, обязательно покажите что у вас получилось : )