Создаем динамические кнопочки-ссылки с помощью CSS

Комментарии (153)

1. 

   Dimox

   15 лет 10 месяцев назад

   Для этого в CSS есть параметр width. Пример:

   a.buttonactive {
     width: 100px;
   }
   

   Данная запись означается, что кнопка будет шириной в 100 пикселей.

2. 

   vicvicor

   15 лет 10 месяцев назад

   Спасибо!

   Результат вот здесь: www.probegauto.ru/new/lot_new.php?id=1847
   По вышеуказанной технологии выполнено меню и кнопка НАЙТИ АВТО.
   Получилось отлично!

3. 

   Dimox

   15 лет 10 месяцев назад

   Пожалуйста. Рад, что у вас все получилось. ;)

4. 

   XAMelleOH

   15 лет 9 месяцев назад

   Спасибо за статью, нового для себя ничего не узнал, но описано очень четко, акуратно и качественно.

   Sergey упоминал о том что картинки закешировалась и он не мог отослать камент — для этого придумали сочетание клавиш Ctrl + R — причем про F5 я уже вообще забыл и практически никогда не использую.

5. 

   Dimox

   15 лет 9 месяцев назад

   Спасибо, XAMelleOH .

6. 

   AcidDog

   15 лет 7 месяцев назад

   чуть логичней и компактнее

7. 

   Slim Shady

   15 лет 5 месяцев назад

   Очень хорошая статья! Вот только проблемка с Crystal Button… Можете подсказать, где можно скачать полностью бесплатную версию?

8. 

   Slim Shady

   15 лет 5 месяцев назад

   Ну или хотя бы кряк?

9. 

   Ogalig

   15 лет 4 месяца назад

   Здравствуйте. У меня не работает событие. button:active{} Пробовал запускать и в мозиле и в 7 осле и в опере. Ни в какую. С чем это может быть связано?

10. 

    Dimox

    15 лет 4 месяца назад

    Не видя рабочий пример, я не могу ничего сказать.

11. 

    Ogalig

    15 лет 4 месяца назад

    Прошу прощения. Вот он:

    .ButtonEmty
    {
    width:20px;
    height:20px;
    background-image:url ('ButtonEmty.png');
    display: block;
    text-decoration: none;
    }

    .ButtonEmty:hover
    {
    background-position:-20px 0;
    }

    .ButtonEmty:active
    {
    background-position:-40px 0;
    }

12. 

    Ogalig

    15 лет 4 месяца назад

    Не вставляется тег, а =(В общем в нем прост присваивается класс ButtonEmty

13. 

    Dimox

    15 лет 4 месяца назад

    Даже не знаю, в чем причина. Если класс ButtonEmty используется для тега ссылки, то по идее должно бы работать.

    • 

      Nadyushka

      13 лет назад / ответ на коммент Dimox

      Проблема заключается в том, что Ogalig выставил высоту в своем примере: {height:20px;}. Если отказаться от height и проставить высоту при помощи {line-height: 20px;}, либо подобрать ее при помощи padding, как это сделал автор — то все правильно работает.

14. 

    Владислав

    15 лет 3 месяца назад

    <ul id="mainlevel">
       <li><a href="#" class="current"><b>Parks & Recreation</a></b></li>			</ul>
    

    ul#mainlevel li a {
    float: left;
    font-size:14px;
    color:#016d9a;
    margin:	margin:0; 
    }
    
    a b { font-weight:normal;}
    
    	  ul#mainlevel li a:hover {
    	  position:relative;
    	  left:-4px;
    	  padding:0 0 0 5px;
     	  color:#20ba49;
       	  text-decoration:none;
    	  background: url('img/menu/left_on.gif') 0 0 no-repeat;
    		} 
    
    		*HTML ul#mainlevel li a:hover {
    		overflow:visible;
    		}
    
    ul#mainlevel li a:hover b {
        padding:0 6px 0 0;
     	margin:0;
        background: url('img/menu/right_on.gif') top right no-repeat;
    	display:block;
        position:relative;
       	color:#fff;
    	}  *HTML ul#mainlevel li a:hover b {
    		
    		margin:0 -1px;
    		}
    

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

15. 

    3cc3ntr1c

    15 лет 2 месяца назад

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

    a.button {
    display: block;
    width: 90px;
    float: left; /* чтобы кнопка не растягивалась на всю ширину родительского блока, а ограничивалась текстом */
    font: bold 12px arial, sans-serif;
    color: #555;
    text-decoration: none;
    background: url (http://eccentr1c.narod.ru/Untitled.gif) top right no-repeat;
    padding-right: 25px; /* отступ для «раздвижных дверей» */
    outline: none; /* убираем точечную обводку в FireFox, которая появляется при клике */
    }
    a.button span {
    display: block;
    line-height: 13px;
    background: url (http://eccentr1c.narod.ru/Untitled1.gif) no-repeat;
    padding: 7px 0 13px 23px;
    }

16. 

    3cc3ntr1c

    15 лет 2 месяца назад

    Простите. Это тоже вставил. Всёравно абракадабра. eccentr1c.narod.ru/test2.html — тут я тестирую этот скрипт.

    a.button:hover {
    background-position: 100% -33px;
    }
    a.button:hover span {
    background-position: 0% -33px;
    color: #222;
    }

17. 

    Dimox

    15 лет 2 месяца назад

    3cc3ntr1c, потому что у вас неправильно использованы рисунки. Untitled. gif и Untitled1. gif должны быть левой и правой частью одной кнопки, а у вас это 2 разные кнопки.

18. 

    3cc3ntr1c

    15 лет 2 месяца назад

    А кнопки должны обе быть в одном рисунке?

19. 

    Dimox

    15 лет 2 месяца назад

    В статье же все видно. Левые части всех состояний кнопок — один рисунок, правые части — другой.

20. 

    3cc3ntr1c

    15 лет 2 месяца назад

    А вот к примеру мне не нужно чтоб кнопки растягивались. Я создал рисунок, но в отличии от вашего они у меня сьезжают. Просто хотелось бы узнать какие именно параметры отвечают за сдвиг рисунка под соответствующуюю кнопку. А у меня получается что виден больший кусок рисунка чем мне нужен… Вообщем как-то так)