Кнопка-ссылка с закруглёнными уголками

ТС, смотрите тут

Очень сложно написано..помогите пожалуйста в данном случае..подсветка при наведении у меня уже есть. Мне нужно лишь добавить уголки..

MoLoTstyle добавил 21.07.2009 в 12:15

Буду рад любой помощи..

MoLoTstyle, если для вас это сложно, то зачем лезть? :)

Вот вам кино про сругленные уголки с того же сайта:

http://www.artlebedev.ru/tools/technogrette/html/rounded-corners/

Вот вам код, который пока работает не во всех браузерах, но правильный во всех смыслах:

A.round {
	background: red;
	-webkit-border-radius:7px;
	-moz-border-radius:7px;
	border-radius:7px;
	}

MoLoTstyle, у меня в опере на пример, на mySEOtalk.ru эти кнопки поплыли ... Можно не заморачиваться и кнопку сделать в Фотошопе

<input type="image" />

<style>

p{margin:0px;padding:0px;} // убираем отступы у тега <P>

.button{overflow:hidden;zoom:1;background:#66C701;} // Задаем контейнеру цвет фона и чтобы он растягивался по содержимому

.top_left{float:left;background:url(i/1.gif) left top no-repeat;width:8px;height:8px;} // Левый верхний угол. картинка 1.gif c шириной и высотой

.top_right{float:right;background:url(i/2.gif) right top no-repeat;width:8px;height:8px;} // Правый верхний угол. картинка 2.gif c шириной и высотой

.bottom_left{float:left;background:url(i/3.gif) left top no-repeat;width:8px;height:8px;} // Левый нижний угол. картинка 3.gif c шириной и высотой

.bottom_right{float:right;background:url(i/4.gif) right top no-repeat;width:8px;height:8px;} // Правый нижний угол. картинка 4.gif c шириной и высотой

</style>

<div class="button">

<div class="top_left"></div><div class="top_right"></div>

<p>text text text text text</p>

<div><div class="bottom_left"></div><div class="bottom_right"></div></div>

</div>

Николай В., суть в том что сложно - значит интересно, нужно чтоб работало во всех браузерах и растягивалось во все стороны, чтоб не заморачиваться надо использовать 3 картинки уголка.

mff, у вас ничего не поплыло, просто кнопки находятся в работе, я эксперементирую.

P.S Неужели просто нельзя написать в этот код 4 картинки) ? Для тех кто знает CSS это же наверное легко?!

MoLoTstyle добавил 21.07.2009 в 12:44

Stan_Ly, можешь применить тоже самое только уже к моему коду:

.post {

}

.posttitle {

margin-bottom: 0;

color: #FFF;

width: 100%;

overflow: auto;

/* Width and overflow to clear '.posttitle a' */

}

.posttitle a {

float: left;

padding: 0 10px;

background: #0099FF url(images/posttitle2.gif) top left no-repeat;

}

.posttitle a:link, .posttitle a:visited {

color: #FFF;

}

.posttitle a:hover, .posttitle a:active {

background: #A2B0C0 url(images/posttitle.gif) no-repeat 100% -81px;

color: #FFF;

}

я не рублю имено в .posttitle и т.д...саму начинку я понимаю..но как всё это связать..

Вот от меня рецепт, с применением таблички, просто всё:

<table width="200" height="20" border="0" cellspacing="0" cellpadding="0" onclick="javascript:document.location.href='https://searchengines.guru/';" onmouseover="javascript:this.style.cursor='pointer';">

  <tr>

    <td width="10" style="background:url(l_f.png) left no-repeat;">&nbsp;</td>

    <td align="center" style="background:#16860a;">Кнопка</td>

    <td width="10" style="background:url(p_f.png) right no-repeat;">&nbsp;</td>

  </tr>

</table>

mff, ну таблицы для баттона — это перебор даже с моей лояльностью :)

тс, 38 способов: http://vremenno.net/html-css/38-articles-about-creating-rounded-corners

toxic steel, согласен, зато всё просто и валидно ;)

Спасибо за 38 способов, интересно на досуге будет почитать :)

Спасибо всем! Кнопку сделал, смотрите. ) На днях буду менять сайдбар.)