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

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

Чем привлекательны CSS - тем, что они часто, при создании тех или иных эффектов, позволяют заменить JavaScript. Вот и на этот раз каскадные таблицы стилей помогут нам сконструировать красивые динамические кнопочки. Информацию, изложенную ниже, можно рассматривать как альтернативу способу создания универсальных графических кнопок и данный ...

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

  1. Уже спрошал про то как побороть траблы с ПНГ-шками…до сих пор тишина

  2. Здравствуйте.
    Не подскажите, как сделать, чтобы кнопки не «съезжали» при сужении браузера?

  3. Спасибо за отличные кнопки 2 дня изобретал велосипед и тут на тебе такое!!! В полном восторге. Есть только один вопрос когда вставляешь ссылку в код, кнопка постоянно помещается на новую строчку, как сделать так чтобы кнопка оставалась в той же строке что и предыдущий текст. Пример — поле пароль после него в той же строке хочу сделать кнопку — не получается. она переносится на новую строчку.

  4. либо сделать полю пароля inline: block,

    наверное, имелось в виду

    display: inline-block

    ?

  5. ну вобщем почитал пост, автору еще раз респект и уважуха, неустаю удивлятся красоте, простоте и полезности блога :). Вот по быстрому набросал код для картинок .png, конечно код не претендует на звание самый оптимальный, так как я его побыстрому набросал. Но если кто доработает то все с удовольствием возьмут себе на заметку

    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    	<title>png-link</title>
    	<link rel="stylesheet" type="text/css" href="all.css"/>
    	<!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="css/lt7.css" media="screen"/><![endif]-->
    </head>
    <body>
    <!-- wrapper -->
    <div id="wrapper">
    	<a class="btn" href="#">
    		<strong>
    			<em>Link</em>
    			<span>&nbsp;</span>
    		</strong>
    	</a>
    </div>
    <!-- end wrapper -->
    </body>
    </html>
    

    и css такой:

    
    body{
    	background:#ccc; /*только для того чтобы было видно что картинка пнгешная*/
    }
    #wrapper{
    	width:200px;
    	overflow:hidden;
    	margin:50px auto 0; /*типа коекак спозиционировал по центру экрана чтобы лучше видно было*/
    }
    .btn{
    	float:left; /*заметьте что при флоате ненадо указывать еще и display:block; это будет лишний код*/
    	font:14px/18px Verdana, Tahoma, sans-serif;
    	text-decoration:none;
    	color:#fff;
    	overflow:hidden;/*обрезаем то что будет вылазить*/
    	position:relative;/*без этой строки overflow:hidden; несработает в ие6, так как фильтры "поднимают" слой*/
    	cursor:pointer;/*после подключения фильтров в ие6 курсор станет defolt, для избежания этого надначаем pointer*/
    }
    .btn strong{
    	float:left;
    	font-weight:normal;
    	position:relative;
    	padding:0 10px 0 0;
    }
    .btn em{
    	font-style:normal;
    	padding:0 0 2px 10px;
    	float:left;
    	background:url(../img/button.png) no-repeat;
    }
    .btn span{
    	width:500px;
    	height:80px;
    	position:absolute;/*аналогично флоату - при абсолюте ненадо добавлять лишний код display:block;*/
    	overflow:hidden;/*можна и без этого, но был замечен баг в подобной ситуации в сафари2 на маке*/
    	top:-20px;
    	right:0;
    	background:url(../img/button.png) no-repeat;
    }
    .btn:hover{
    	background:transparent;/*опять же таки для ие6, так как если ховер на ссылку неотработает то и на все внутренние елементы тоже, я выбрал такое свойство чтобы неменять визуально ничего другого в ссылке*/
    }
    .btn:hover em{
    	margin-top:-40px;
    	padding-top:40px;
    }
    .btn:hover span{
    	top:-60px;
    }
    

    Обратите внимание что высота ссылки 20px, и картинка для бекграунда и ховера — одна.
    Она такова:
    верхняя полоска — это простое состояние кнопки, вторая ниже в правом краю правая круглая часть кнопки, третяя полоска это ховерное состояние, и последняя нижняя часть — это правое ховерное заокругление.
    я бы выложил пример да незнаю как :(

  6. Ой, забыл добавить фильтры для ие6

    
    .btn em{
    	background:none;
    	filter:progid:dximagetransform.microsoft.alphaimageloader(src='img/button.png', sizingMethod='crop');
    }
    .btn span{
    	background:none;
    	filter:progid:dximagetransform.microsoft.alphaimageloader(src='img/button.png', sizingMethod='crop');
    }
    
  7. Уважаемый автор, хочу вам сказать что я использовала ваш код, полностью без изменений и вся структура моей страницы поехала. У меня кнопки распологались горизонтально, каждая на своей высоте и расстояние справа/слева было плавающим.
    Может подсткажете как устранить проблемы?

  8. Здравствуйте Dimox, мне очень понравилась ваша статья и я хотел бы спросить — какие дополнительные события onclick нужно добавить чтобы использовать такие графические кнопки в форме?

  9. Интересный пост! Можно еще используя JS. Описано тут: http://deadhorse.spb.ru/buttons-rounded-corners-javascript

  10. Здравствуйте!
    Пост интересный, частично пригодился.
    Однако, ваша кнопка «с нажимом» в ИЕ всё-таки работает неправильно. Даже несмотря на то, что она никуда не ссылается.
    Чтобы убедиться в этом, просто нажмите на неё, и не отпуская кнопки мыши, отведите курсор с кнопки и лишь затем отпустите мышь. Кнопка так и останется «нажатой».
    Смена onclick на onmouseup мне тоже не помогла.

    onmouseup=»document.getElementById(«elID»).style.backgroundImage=’images/button.png’;»
    Добавление этой строки в тек почему-то не приводит к тому, что при событии onmouseup фоновый рисунок возвращается в «ненажатое» состояние.

    Очень хотелось бы разобраться в этой проблеме! Спасибо.

  11. Простите, там в строке ошибка. Я конечно же прописываю ‘elID’ в одинарных кавычках. Но всё равно не работает.

  12. Здравствуйте!
    Я сделал все по образцу и на кнопки делаю ссылки, но в Опере он не переходит по ссылкам нажатием левой клавиши, а только если открывать в новой вкладке! что делать?
    заранее спасибо!

  13. В ie8 есть проблема: заключенный внутрь ссылки блокирует действие пседвокласса :active, поэтому в отличии от 6 и 7 осла (где как ни странно все ок) эффекта нажатия не происходит( Долго искал как решить эту проблемку, но ничего другого не придумал, как через хак для 8-ки прикрепить новый бекграунд

  14. Привет всем! Я не очень еще разобралась, как вообще программировать с использованием css. И в этом примере никак не могу разобраться. А мне очень срочно надо!((( для диплома. Кто сможет помочь, напишите, пожалуйста в аську — 395-668-611.

  15. Большое спасибо за статью! Очень помогла! Столкнулся с css — оказалось ничего сложного!))) Все элементарно!

  16. Спасибо за статью, очень полезна, как и остальные ваши статьи типа 3колончатого шаблона)

    Но вот проблема возникла, что то не получается своими силами исправить
    Хочу сделать вертикальное меню с помощью кнопок, но получаются какие то огромные отступы или вообще по 2 кнопки в строчку залазят
    Есть ли способы борьбы с этим?

    Вот пример
    И еще

    CSS:

    a.butt {
    margin: 12px 2px 15px 2px;
    display: block;
    float: left; /* чтобы кнопка не растягивалась на всю ширину родительского блока, а ограничивалась текстом */
    font: bold 12px arial, sans-serif;
    color: #ccc;
    text-decoration: none;
    background: url(http://mssi.wallst.ru/textures/butt/button_r.gif) top right no-repeat;
    padding-right: 16px; /* отступ для "раздвижных дверей" */
    outline: none; /* убираем точечную обводку в FireFox, которая появляется при клике */
    }

    a.butt span {
    display: block;
    line-height: 13px;
    background: url(http://mssi.wallst.ru/textures/butt/button_l.gif) no-repeat;
    padding: 9px 0 11px 33px;
    }

    a.butt:hover {
    background-position: 100% -33px;
    }

    a.butt:hover span {
    background-position: 0% -33px;
    color: #fff;
    }

    a.butt:active {
    background-position: 100% -66px;
    }

    a.butt:active span {
    background-position: 0% -66px;
    color: #fff;
    padding: 10px 0 10px 33px; /* опускаем текст на 1px */
    }

    html:


    <center>
    <p><a href="#" class="butt" onclick="this.blur(); return false;"><span>right</span></a></p>
    <p><a href="#" class="butt" onclick="this.blur(); return false;"><span>right</span></a></p>
    <p><a href="#" class="butt" onclick="this.blur(); return false;"><span>right</span></a></p>
    <p><a href="#" class="butt" onclick="this.blur(); return false;"><span>right</span></a></p>
    </center>

  17. Статья очень помогла!
    Но в IE 8 кнопки не работают. При наведении курсора на текст кнопки, нажатия не происходит. Опишите, пожалуйста, подробней как заставить кнопки работать в IE 8.

  18. Хотел сделать кнопки на сайт, не заморачиваясь со скриптами, искал — как — и наткнулся на ваш сайт. Всё очень интересно и познавательно, но…Есть одно но, -для новичка немного сложновато( я написал свой сайт полностью в блокноте).Меня это заинтересовало — оказывается есть программа Css меню генератор называется , которая за , буквально, пару минут позволяет без заморочек сгенерировать нужные коды на любое количество кнопок для меню и не только, чтобы не быть голословным — посмотрите сами , что получилось-
    m-printservice.ru-

  19. Объясните мне пожалуйста, неучу безграмотному… Нарисовал кнопки, как показано у Вас в учебнике, методом проб и ошибок, сделал ту кнопку которая мне нужна — фон появляется только при наведении в противном случае его нет. Проблема в размещении на странице. Это безобразие прилипает к левому краю, а мне нужно чётко посередь ! Никак не могу отодрать ( Помогите пожалуйста!


    a.button {
    display: block;
    float: left; /* чтобы кнопка не растягивалась на всю ширину родительского блока, а ограничивалась текстом */
    font: 12px arial, sans-serif;
    color: #555;
    text-decoration: none;
    padding-right: 15px; /* отступ для "раздвижных дверей" */
    outline: none; /* убираем точечную обводку в FireFox, которая появляется при клике */
    border-top-style: none;

    }
    a.button span {
    display: block;
    line-height: 13px;
    padding-top: 7px;
    padding-right: 0;
    padding-bottom: 13px;
    padding-left: 15px;
    width: auto;
    }

    a.button:hover {
    background-image: url(img/nav-butt-r.png);
    background-repeat: no-repeat;
    background-position: right;

    }
    a.button:hover span {
    background-image: url(img/nav-butt-l.png);
    background-repeat: no-repeat;

    color: #0094c7;
    }
    .button {
    padding-top: 5px;
    position: relative;
    width: auto;
    }

    • У Вас в a.button { } фон не прописан, поэтому его нет по умолчанию.

      • Да он мне и не нужен был. Я уже разобрался. пришлось пожертвовать «резиновостью», но кнопки по центру я расположил. Спасибо за пример.. поучительно )

        • Вот здесь хорошая статья как раз для такого случая:
          http://w3pro.ru/article/vyravnivanie-blokov-po-tsentru

          т.е. надо вокруг ссылки добавить 2 дополнительных элемента

          <div id="center-1"><div id="center-2"><a href="#" name="cat"><img src="button.gif" alt="Кнопочка" border="0"></a></div></div>

          и в стили добавить:

          #center-2 {
          position: relative;
          float: left;
          left: 50%;
          list-style: none;
          margin: 0;
          padding: 0;
          }

          #center-2 a {
          position: relative;
          float: left;
          right: 50%;
          padding: 10px;
          }

          #center-1 {
          overflow: hidden;
          }

  20. Тупо потраченное время. Предупреждать надо, что в IE6 полная жопа. А вставить вставку «Обновите браузер» проще всего.

    • Что значит «в IE6 полная жопа»? Я свою кнопку тестировала и под ie6, жопы не наблюдала. Может, подробней опишете свою проблему, выложите код — протестируем и чем сможем — поможем!