Вот такая интересная кнопочка

[7Lexus]

Доброго дня, Верховный!

Надыбал одну кнопочку на просторах...

Собственно код:

Код:

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style>
.buttonText {
  font: 18px/1.5 Helvetica, Arial, sans-serif;
  color: #fff;
}

a {
  color: #fff;
  text-decoration: none;
}


#button1 {
  background: #6292c2;
  border: 2px solid #eee;
  height: 28px;
  width: 75px;
  margin: 50px 0 0 50px;
  padding: 0 0 0 7px;
  overflow: hidden;
  display: block;
/*Скругленные углы*/
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
/*Градиент*/
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
/*Переход*/
-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
-ms-transition: All 0.5s ease;
transition: All 0.5s ease;
}
#button1:hover {
width: 270px;
}
</style>

<a href="#" id="button1" class="buttonText">Скачать - <span style="color: yellow;">документ Word 17 Кб</span></a>
<a href="#" id="button1" class="buttonText">Скачать - <span style="color: yellow;">документ Word 17 Кб</span></a>

Хотелось бы чтобы место под текст, которое появляется в выдвигающейся части автоматически масштабировалось по текст любой длины (ну в разумных пределах, без переноса строк), т.е. width: 270px подогнано под текст "документ Word 17 Кб", а как сделать, чтобы не подбирать ширину, а она сама масштабировалась под другой текст (ну, или короче или длиннее).

Визуально - тут admshel-forum.ucoz.ru/publ/menu/1-1-0-2

Спасибо заранее!

[Admin]

Что-то на CSS не получилось сделать как Вы хотите. На выходных попробую сделать то же самое на jQuery.

[Admin]

Как и обещал, выкладываю что получилось.
Прошу строго не судить за не очень оптимальное решение, т.к. задача на самом деле не из легких.

Код:

<style type="text/css">
a {color: #fff; text-decoration: none;}
.buttonText {
font: 18px/1.5 Helvetica, Arial, sans-serif;
color: #fff;
background: #6292c2;
border: 2px solid #eee;
height: 28px;
width: 75px;
margin: 50px 0 0 50px;
padding: 0 7px 0 7px;
overflow: hidden;
display: block;
/*Скругленные углы*/
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
/*Градиент*/
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
}
.bT {
font: 18px/1.5 Helvetica, Arial, sans-serif;
border: 2px solid #eee;
position:absolute;
visibility:hidden;
}
</style>

<p>
<span class="bT">Скачать - документ Word 17 Кб (а может и больше)</span>
<a href="#" class="buttonText">Скачать - <span style="color: yellow;">документ Word 17 Кб (а может и больше)</span></a>
</p>
<p>
<span class="bT">Скачать - документ Word 17 Кб</span>
<a href="#" class="buttonText">Скачать - <span style="color: yellow;">документ Word 17 Кб</span></a>
</p>


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
    $(".buttonText").hover(
        function(){$(this).animate({width: $(this).parent().children('.bT').width()}, 1000);},
        function(){$(this).animate({width: "75px"}, 1000);});

});
</script>

Суть данного скрипта заключается в том, что мы под кнопкой создаем блок невидимого текста, оформленного таким же образом, как и на кнопке.
При наведении курсора мышки на кнопку, мы считываем ширину невидимого текста под кнопкой и плавно увеличиваем размер кнопки до нужного.

[7Lexus]

(18.05.2013 22:07:28)Admin писал(а):  Прошу строго не судить за не очень оптимальное решение, т.к. задача на самом деле не из легких.

Судить не буду совсем, так как меня устраивает вполне.
1000 заменил на 333 и самое оно!

Спасибо огромное!