<div class="container">
    <span class="button fb">
        <a href="#"><img src="https://d3pr5r64n04s3o.cloudfront.net/167_QuickTip_CSS3Buttons/images/fb.gif" alt="" />Like It</a>
    </span>
 
    <span class="button twit">
        <a href="#"><img src="https://d3pr5r64n04s3o.cloudfront.net/167_QuickTip_CSS3Buttons/images/tweet.gif" alt="" />Tweet It</a>
    </span>
 
    <span class="button mail">
        <a href="#"><img src="https://d3pr5r64n04s3o.cloudfront.net/167_QuickTip_CSS3Buttons/images/mail.gif" alt="" />Email</a>
    </span>
</div>

Вот и все, что нужно для разметки HTML, теперь вы должны иметь что-то вроде этого …

Шаг 2: Создаем стили!

Первое, что мы собираемся добавить, приятный синий фон гравий, который можно найти в исходных файлах внизу. Затем мы поместим на наш цвет ссылки и стиль контейнера в центре нашей кнопки на холст с помощью margin: 0 auto.

Шаг 2: Создаем стили!

Первое, что мы собираемся добавить, приятный синий фон гравий, который можно найти в исходных файлах внизу. Затем мы поместим на наш цвет ссылки и стиль контейнера в центре нашей кнопки на холст с помощью margin: 0 auto.

body{
    background: url(../images/bg.jpg) repeat 0 0;
}
 
a{
    text-decoration: none;
    color:#333333;
}
 
.container{
    width: 420px;
    margin: 10% auto 0; /* buttons pushed from the top by 10% */
}

Теперь давайте создадим некоторое расстояние между кнопками, как то так …

.button{
    margin: 8px;
}

Создав хороший градиент и тени окна, мы можем сделать кнопки более интерактивными. Затем мы добавим некоторое дополнение к верхней, нижней и боковой кнопке чтобы было гораздо легче читать.

.button a{
    font-family:font-family: 'Arvo', arial, serif;;
    font-size:16px;
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #dfdfdf 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#dfdfdf)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffffff 0%,#dfdfdf 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 0%,#dfdfdf 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #ffffff 0%,#dfdfdf 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dfdfdf',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #ffffff 0%,#dfdfdf 100%); /* W3C */
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0 3px 4px -1px #464646;
    -webkit-box-shadow: 0 3px 4px -1px #464646;
    box-shadow: 0 3px 4px -1px #464646;
    padding: 6px 12px;
}

Идем дальше, выравниваем кнопки немного, чтобы они выглядели наполовину нажатыми с помощью :hover селектора. Мы будем также использовать стиль :focus.

.button a:hover, .button a:focus{
    background: #dfdfdf; /* Old browsers */
    background: -moz-linear-gradient(top, #dfdfdf 0%, #ffffff 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dfdfdf), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #dfdfdf 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #dfdfdf 0%,#ffffff 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #dfdfdf 0%,#ffffff 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfdfdf', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #dfdfdf 0%,#ffffff 100%); /* W3C */
    -moz-box-shadow: 0 1px 1px 0 #666666;
    -webkit-box-shadow: 0 1px 1px 0 #666666;
    box-shadow: 0 1px 1px 0 #666666;
}

Кнопка справа показывает, что при наведении мы должны получить.

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

.button a:focus{
    -moz-box-shadow: 2px 3px 2px -1px #464646 inset, 0 1px 1px 0 #666666;
    -webkit-box-shadow: 2px 3px 2px -1px #464646 inset, 0 1px 1px 0 #666666;
    box-shadow: 2px 3px 2px -1px #464646 inset, 0 1px 1px 0 #666666;
}

На этом этапе вы должны получить что-то похожее на изображение ниже.

Наконец мы добавим padding между иконками и текстом кнопки.

.button a > img{
    padding-right: 8px;
    position: relative;
    top: 2px;
}

У вас должно получиться что-то вроде этого …

Отличная работа! Вы создали несколько действительно прикольных CSS3 кнопок.