Как сделать утопленную кнопку в CSS

Question

На изображении ниже, верхнее изображение - это то, что у меня есть на сайте, оно использует фактическое изображение.

Я хочу сделать что-то похожее на нижнее изображение, используя чистый CSS, но я не могу понять, как это сделать, может кто-нибудь помочь?

Answer 1

CSS3 имеет много решений.Попробуйте это:

div.exampleboxshadowj {
background-color: #EEE;
float: left;
margin-top: 20px;
margin-right: 40px;
height: 65px;
width: 160px;
text-align: center;
-webkit-box-shadow: inset -5px -5px 5px 5px#888;
box-shadow: inset -5px -5px 5px 5px #888;
}

Хотя вы можете изменить цвет на синий, если хотите.

Здесь - отличная ссылка для всей необходимой вам информации.

Answer 2

привет, вы можете использовать этот css3-браузер, совместимый css-код для ваших требований: -

    .shadow {
    width:150px;
    height:150px;
    background-color: rgb(55,79,99); /* Needed for IEs */
    -moz-box-shadow: inset 13px 0px 19px 5px rgba(38,56,70,0.9);
    -webkit-box-shadow: inset 13px 0px 19px 5px rgba(38,56,70,0.9);
    box-shadow: inset 13px 0px 19px 5px rgba(38,56,70,0.9);

    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
    -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
    zoom: 1;
}

или посмотрите живую демонстрацию : - http://jsfiddle.net/dte78/32/

и можете узнать больше о тени от коробки

Answer 3

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

http://webdesignerwall.com/tutorials/cross-browser-css-gradient

Я думаю, что, поскольку они используютbackground свойство, вам нужно иметь фактические изображения на кнопках внутри какого-либо контейнера позиции.

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

Answer 4

Если я правильно вас понял, вы пытаетесь изменить изображение, когда оно щелкается или активно. Если это так, то для этого вы можете использовать :focus или :active.

Вот демоверсия с цветом фона вместо картинки.