Автор: UseWisdom.com
Перевод: Всеволод Козлов

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

Написать же данное микро-руководство меня подтолкнуло огромное количество вопросов, звучащих примерно так: «Как создавать такие же кнопочки? Я тоже такую хочу!!!»

Наша цель: научить всех нуждающихся создавать фирменные css-кнопки.

В итоге мы получим:

Button css

Далее будут представлены полные фрагменты HTML и CSS-кодов, благодаря которым был получен продемонстрированный выше результат!

Фрагмент HTML-кода

<span class="cssbutton"><span class="buttonleft">css</span>
<span class="buttonright">button</span></span>

Фрагмент CSS-кода

.cssbutton {
background: #fff;
padding: 1px;
font-family: Geneva, Vera, Arial, Helvetica, sans-serif;
font-size: x-small;
font-variant : small-caps;
border : 1px solid #aaa;
}
.buttonleft {
color: #f8f8f8;
background: #a42;
padding: 0px 3px 0px 3px;
}
.buttonright {
color: #f8f8f8;
background: #886;
padding: 0px 20px 0px 3px;
}

Помимо этого, я хочу предложить Вам отличный сервис автоматической генерации подобных кнопок.

С помощью данного сервиса Вы сможете создавать абсолютно индивидуальные по параметрам фирменные кнопочки.

Оригинал статьи: CSS Button






















Смотрите также:

Понравилась статья? Поделитесь ей в социальных сетях: