CSS Gradient перестает добавлять: эффект зависания

Я пытаюсь сделать набор кнопок, я создал стандартную кнопку и, конечно, хочу эффект зависания, но, как я это делаю, градиент не кажется для перехода в состояние зависания.CSS Gradient перестает добавлять: эффект зависания

.sqaure-blue-btn { 
    border: 1px solid #2f78a9; /* stroke */ 
    background-color: #3999d7; /* layer fill content */ 
    -moz-box-shadow: inset 0 1px 1px #82cdff; /* inner shadow */ 
    -webkit-box-shadow: inset 0 1px 1px #82cdff; /* inner shadow */ 
    box-shadow: inset 0 1px 1px #82cdff; /* inner shadow */ 
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMzODViYyIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhOWFkYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+); /* gradient overlay */ 
    background-image: -moz-linear-gradient(bottom, #3385bc 0%, #3a9ada 100%); /* gradient overlay */ 
    background-image: -o-linear-gradient(bottom, #3385bc 0%, #3a9ada 100%); /* gradient overlay */ 
    background-image: -webkit-linear-gradient(bottom, #3385bc 0%, #3a9ada 100%); /* gradient overlay */ 
    background-image: linear-gradient(bottom, #3385bc 0%, #3a9ada 100%); /* gradient overlay */ 
} 
.sqaure-blue-btn:hover { 
    border: 1px solid #2f78a9; /* stroke */ 
    background-color: #3b9ddd; /* layer fill content */ 
    -moz-box-shadow: inset 0 1px 1px #82cdff; /* inner shadow */ 
    -webkit-box-shadow: inset 0 1px 1px #82cdff; /* inner shadow */ 
    box-shadow: inset 0 1px 1px #82cdff; /* inner shadow */ 
}

Кто-нибудь знает почему?

Fiddle: http://jsfiddle.net/dpUaL/

источник

2013-07-19 user2598957

скрипку было бы полезно – Brewal

Это вряд ли будет проблемой, учитывая, что она влияет как на парение и состояние не-парения, но вы неправильно " квадрат "в селекторе. –

http://jsfiddle.net/dpUaL/ – user2598957

Поскольку вы устанавливаете в вашей стандартной собственности на background-image, но только background-color в :hover состоянии, не перекрывая изображение.

Изменение background-color: #3b9ddd; в background: #3b9ddd;

.sqaure-blue-btn { 
 
    height: 50px; 
 
    border: 1px solid #2f78a9; 
 
    /* stroke */ 
 
    background-color: #3999d7; 
 
    /* layer fill content */ 
 
    -moz-box-shadow: inset 0 1px 1px #82cdff; 
 
    /* inner shadow */ 
 
    -webkit-box-shadow: inset 0 1px 1px #82cdff; 
 
    /* inner shadow */ 
 
    box-shadow: inset 0 1px 1px #82cdff; 
 
    /* inner shadow */ 
 
    background-image: url(data:image/svg+xml; 
 
    base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMzODViYyIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhOWFkYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+); 
 
    /* gradient overlay */ 
 
    background-image: -moz-linear-gradient(bottom, #3385bc 0%, #3a9ada 100%); 
 
    /* gradient overlay */ 
 
    background-image: -o-linear-gradient(bottom, #3385bc 0%, #3a9ada 100%); 
 
    /* gradient overlay */ 
 
    background-image: -webkit-linear-gradient(bottom, #3385bc 0%, #3a9ada 100%); 
 
    /* gradient overlay */ 
 
    background-image: linear-gradient(bottom, #3385bc 0%, #3a9ada 100%); 
 
    /* gradient overlay */ 
 
} 
 
.sqaure-blue-btn:hover { 
 
    border: 1px solid #2f78a9; 
 
    /* stroke */ 
 
    background: #3b9ddd; 
 
    /* layer fill content */ 
 
    -moz-box-shadow: inset 0 1px 1px #82cdff; 
 
    /* inner shadow */ 
 
    -webkit-box-shadow: inset 0 1px 1px #82cdff; 
 
    /* inner shadow */ 
 
    box-shadow: inset 0 1px 1px #82cdff; 
 
    /* inner shadow */ 
 
}

<div class="sqaure-blue-btn"></div>

источник

2013-07-19 10:00:10 Novocaine

Aha! Спасибо!! Ценить это! – user2598957

не стесняйтесь принять ответ, если он помог :) – Novocaine

Я сделаю 1 минута слева – user2598957

CSS Gradient перестает добавлять: эффект зависания

ответ

Смежные вопросы