Резиновая кнопка оригинальной формы

silverlight90 · August 2, 2011

Я недавно начал заниматься версткой и столкнулся с небольшой проблемой. Нужно сделать кнопку, растягивающуюся в зависимости от ширины текста. Кнопка имеет необычную форму. Растягивание кнопки с обычными закруглениями выполняется просто. Здесь нужно сохранить форму кнопки: левый и правый края, а растягивать только середину. Я нашел решение, но в нем кнопка становиться длинной с большими отступами текста. Нужно сделать кнопку как можно короче. Кто сталкивался с подобной проблемой, надеюсь на вашу помощь. Заранее благодарен.

Кнопка: http://webfile.ru/5469334

sigma77 · August 2, 2011

silverlight90,

Выложите кнопку картинкой, а не файлом.

Takker · August 2, 2011

silverlight90,

У вас кнопка имеет неоднородный фон - слева на право цвета так же изменяются. То есть, первым этапом нужно поправить сам шаблон кнопки. Выкладывайте новый вариант - без текста. Можно даже сразу порезанную на три кусочка - тогда я вам сразу готовый код дам.

F315 · August 2, 2011

Если я правильно поняла задачу, то нужно сделать резиновой центральную часть кнопки, где будет располагаться ее наименование. Это можно сделать либо через назначение элементам display:inline-block или float. Тогда ширина элемента будет растягиваться по содержимому.

Что-то вроде этого:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>Кнопка</title>
	<style type="text/css">

	div.wr{
	display:inline-block;
	}
	span{
	display:inline-block;
	background:red;
	height:50px;
	line-height:50px;
	vertical-align: middle;
	}
	.left, .right{
	width:20px;
	vertical-align: middle;
	}
	</style>
</head>

<body>		
	<div class="wr">
		<span class="left"></span><span>Подарить</span><span class="right"></span>
	</div>
</body>
</html>

Edited August 2, 2011 by F315

Sign In

Резиновая кнопка оригинальной формы

Question

silverlight90

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

sigma77

Link to comment

Share on other sites

Takker

Link to comment

Share on other sites

F315

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information