30 марта 2008 ~ 2297 Комментариев

Делаем красивые кнопки

fdgfd

Эта инструкция научит Вас, как создавать очень красивые и удобные текстовые кнопки (с эффектом нажатия), используя CSS.

Техника раздвижных дверей

Что бы сделать наши кнопки практичными, мы должны учесть возможность растяжки кнопок. Для этого вы воспользуемся техникой «раздвижных дверей»(slidingdoors).

Наша кнопка будет состоять из основного тега <a> с вложенным в него тегом <span>, каждый из которых содержит одну из частей фонового рисунка.

Вот то, что HTML выглядит следующим образом:

<a class="button" href="#"><span>Bring world peace</span></a>

Очень просто, не так ли?

Теперь, нам надо разобраться с оформлением нашей кнопки в нормальном состоянии и в состоянии нажатия.

Вот что я думаю:

button-design

Мы будем использовать для обоих состояний одно изображение, просто изменяя его background-position.

Вот так выглядит наша заготовка с учетом всех факторов:

bg_button_span bg_button_a

Оформляем кнопку

Оформляем с помощью следующего css кода:

.clear { /* generic container (i.e. div) for floating buttons */
    overflow: hidden;
    width: 100%;
}

a.button {
    background: transparent url('bg_button_a.gif') no-repeat scroll top right;
    color: #444;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 24px;
    margin-right: 6px;
    padding-right: 18px; /* sliding doors padding */
    text-decoration: none;
}

a.button span {
    background: transparent url('bg_button_span.gif') no-repeat;
    display: block;
    line-height: 14px;
    padding: 5px 0 5px 18px;
}

a.button:active {
    background-position: bottom right;
    color: #000;
    outline: none; /* hide dotted outline in Firefox */
}

a.button:active span {
    background-position: bottom left;
    padding: 6px 0 4px 18px; /* push text down 1px */
}

Специально для IE

В Internet Explorer нажатие кнопки не будет работать, так что сделаем маленькую хитрость на javascript:

<a class="button" href="#" onclick="this.blur();"><span> … </span></a>

Готово ^_^

Посмотреть пример

Скачать пример

По мотивам: http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html

2297 Комментариев для “Делаем красивые кнопки”

  1. vlad 30 марта 2008 at 23:30 Permalink

    ctrl+колесо?

  2. Я собственной персоной 30 марта 2008 at 23:45 Permalink

    ctrl+колесо?

    —Мыло + веревка?

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

  3. Я 19 апреля 2008 at 19:18 Permalink

    wwwwwwwwwwwwwwwwwwwwwwwwwwwwwww ww
    при таком названии кнопка преврашается в… 2 кнопки!
    Не катит…

  4. Я собственной персоной 19 апреля 2008 at 19:29 Permalink

    wwwwwwwwwwwwwwwwwwwwwwwwwwwwwww ww
    при таком названии кнопка преврашается в… 2 кнопки!
    Не катит…

    А Вам действительно нужна такая большая кнопка?

  5. Mitron 21 апреля 2008 at 1:28 Permalink

    немного изменить картинки, чуть подправить css и при изменении шрифта (в ограниченных, правда, параметрах) уже можно жить… так что не всё так страшно, спасибо.

  6. NKostya 19 июля 2008 at 4:53 Permalink

    немного изменить картинки, чуть подправить css и при изменении шрифта (в ограниченных, правда, параметрах) уже можно жить… так что не всё так страшно, спасибо.

    тогда можно размер шрифта сразу в абсолютных величинах задать и не мучаться… самое главно, чтобы размер изначально был адекватным

  7. Aleksej19Grishin 21 мая 2011 at 2:37 Permalink

    подвижные игры и эстафеты для всех

  8. Aleksej19Grishin 21 мая 2011 at 2:38 Permalink

    Прокат авто , – vipavto.com.ua

  9. Aleksej19Grishin 21 мая 2011 at 2:42 Permalink

    Пассажирские перевозки,Аренда микроавтобусов.Киев.

  10. Aleksej19Grishin 21 мая 2011 at 2:50 Permalink

    пассажирские перевозки и трансферы по выгодным ценам

  11. Aleksej19Grishin 21 мая 2011 at 2:50 Permalink

    Тут пассажирские перевозки по выгодному тарифу

  12. Aleksej19Grishin 21 мая 2011 at 3:06 Permalink

    Только тут прокат машин в Киеве, недорого

  13. Aleksej19Grishin 21 мая 2011 at 3:12 Permalink

    Качественный ремонт киев только тут

  14. akciğer kanseri belirtileri 3 февраля 2012 at 9:15 Permalink

    Fantastic post admin thank you. I identified what i was searching for right here. I will review total of posts in such a evening

  15. Firma Rehberi 3 февраля 2012 at 11:41 Permalink

    oh my god great publish admin will verify your blog site at all times

  16. güncel blog 4 февраля 2012 at 1:43 Permalink

    Genuinely essential put up admin fantastic 1 i bookmarked your world-wide-web page see you in subsequent web site submit.

  17. dizi izle 4 февраля 2012 at 2:56 Permalink

    oh my god amazing post admin will check out your webpage continually

  18. ankara ingilizce kursu 4 февраля 2012 at 7:56 Permalink

    Hello admin great put up significantly thanks liked this blog site definitely a lot

  19. filo kiralama 4 февраля 2012 at 8:48 Permalink

    I wanted for this weblog article admin truly thanks i will search your future sharings i bookmarked your weblog

  20. yarış oyunları 4 февраля 2012 at 13:42 Permalink

    Great a single web site owner achievements blog submit wonderful sharings within this blog often have exciting

  21. y8 4 февраля 2012 at 16:26 Permalink

    i cant get how you are able to share like this amazing posts admin considerably thanks

  22. Türkiye Gündemi 4 февраля 2012 at 17:28 Permalink

    I was curious about your upcoming put up admin genuinely wanted this blog super wonderful web site

  23. köpek eğitimi 5 февраля 2012 at 9:19 Permalink

    i cant get how you may reveal like this astounding posts admin considerably thanks

  24. sikiş izle 6 февраля 2012 at 11:39 Permalink

    I necessary for this weblog publish admin really thanks i’ll seem your subsequent sharings i bookmarked your weblog

  25. bayan escort 6 февраля 2012 at 18:06 Permalink

    I was in search of this webpage very last three or more nights wonderful website owner great posts almost everything is fantastic

  26. panax 7 февраля 2012 at 14:39 Permalink

    Hello admin good post significantly thanks beloved this webpage genuinely significantly

  27. lacoste saat 8 февраля 2012 at 11:38 Permalink

    I essential for this blog publish admin actually thanks i will glance your future sharings i bookmarked your weblog

  28. şifreli kapı kilidi 8 февраля 2012 at 14:01 Permalink

    I was curious about your following post admin really essential this weblog super amazing weblog

  29. escort bayan istanbul 10 февраля 2012 at 3:27 Permalink

    hey admin thanks for wonderful and uncomplicated understandable article i beloved your weblog web site definitely a lot bookmarked also

  30. modasozlugu.com 12 февраля 2012 at 2:28 Permalink

    I was seeking for this great sharing admin significantly thanks and also have great blogging bye

  31. çanta modelleri 12 февраля 2012 at 3:33 Permalink

    Really vital put up admin wonderful one i bookmarked your word wide web sheet see you in up coming webpage put up.

  32. Adını Feriha Koydum 15 февраля 2012 at 14:22 Permalink

    oh my god terrific post admin will test your webpage at all times

  33. tube8 15 февраля 2012 at 14:53 Permalink

    Good submit admin! i bookmarked your internet website. i will look ahead when you could have an e-mail checklist adding.

  34. download 16 февраля 2012 at 7:43 Permalink

    i cant get how you’ll be able to share like this amazing posts admin very much thanks

  35. msn aç 16 февраля 2012 at 9:40 Permalink

    i bookmarked you in my browser admin thank you so much i will be looking for your upcoming posts

  36. sohbet 16 февраля 2012 at 12:28 Permalink

    you’re actually number one admin your blogging is incredible i usually test your webpage i’m confident you is going to be the perfect

  37. Metin2 Private Server Tanıtımları 16 февраля 2012 at 13:26 Permalink

    I used to be curious about your future publish admin genuinely needed this blog super amazing blog site

  38. medula eczane 17 февраля 2012 at 6:58 Permalink

    The worst part about the photo of this disgusting criminal is that he isn’t even slightly brown.

  39. dünyanın 7 harikası 17 февраля 2012 at 7:46 Permalink

    Wild animals are wary of humans and avoid them; pet animals are accustomed to humans, usually socialized to them, and for social animals, emotionally dependent on them. A pet animal will pine for its owner if they’re separated; a wild animal will be glad the human’s out of its face. Come on now.

  40. indir 17 февраля 2012 at 16:46 Permalink

    i cant get how you can reveal like this amazing posts admin considerably thanks

  41. müzik indir 20 февраля 2012 at 10:13 Permalink

    I required for this blog submit admin genuinely thanks i will search your up coming sharings i bookmarked your blog

  42. transformers oyunu 20 февраля 2012 at 19:35 Permalink

    Hello admin beneficial post much thanks adored this weblog definitely significantly

  43. android 20 февраля 2012 at 20:04 Permalink

    Amazing article admin thank you. I located what i used to be seeking here. I will review overall of posts in this time of day

  44. yurtdışı patent hizmetleri 20 февраля 2012 at 20:48 Permalink

    Hello admin great publish a lot thanks loved this blog actually much

  45. düğün fotoğrafları 20 февраля 2012 at 22:36 Permalink

    I used to be curious about your next article admin definitely necessary this webpage super wonderful website

  46. oyunculuk ajansları 21 февраля 2012 at 1:42 Permalink

    Sorry for the huge review, but I’m really loving the new Zune, and hope this, as well as the excellent reviews some other people have written, will help you decide if it’s the right choice for you.

  47. bets10 21 февраля 2012 at 13:23 Permalink

    I’ll gear this review to 2 types of people: current Zune owners who are considering an upgrade, and people trying to decide between a Zune and an iPod. (There are other players worth considering out there, like the Sony Walkman X, but I hope this gives you enough info to make an informed decision of the Zune vs players other than the iPod line as well.)

  48. foamex duvar 21 февраля 2012 at 16:44 Permalink

    Greetings thanks for great publish i was looking for this issue final a couple of days. I will search for subsequent precious posts. Have exciting admin.

  49. New Hair Style 21 февраля 2012 at 17:06 Permalink

    Truly vital post admin fantastic one i bookmarked your word wide web sheet see you in future blog site article.

  50. arabic music 21 февраля 2012 at 19:17 Permalink

    Wonderful post admin! i bookmarked your internet web site. i’ll seem ahead when you may have an e-mail list adding.


Оставить комментарий