Стиль кнопки как в Windows

376
15 июня 2017, 04:15

Как сделать такой же стиль кнопки при наведении ?

Answer 1

Взято из ответа c enSO.

a.button { 
    height: 18px; 
    padding: 2px 8px; 
    border: 1px solid #F3F3F3; 
    -moz-box-shadow: 0 0 0 1px #707070; 
    -webkit-box-shadow: 0 0 0 1px #707070; 
    box-shadow: 0 0 0 1px #707070; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    border-radius: 3px; 
    background: -moz-linear-gradient(top, #F2F2F2 0%, #EBEBEB 50%, #DDDDDD 51%, #CFCFCF 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#F2F2F2), color-stop(0.5,#EBEBEB),color-stop(0.51,#DDDDDD),color-stop(1,#CFCFCF)); 
    background: linear-gradient(top, #F2F2F2 0%, #EBEBEB 50%, #DDDDDD 51%, #CFCFCF 100%); 
    font: normal 12px sans-serif; 
    color: black; 
    text-decoration: none; 
} 
a.button:hover { 
    border: 1px solid #ECF7FD; 
    -moz-box-shadow: 0 0 0 1px #3C7FB1; 
    -webkit-box-shadow: 0 0 0 1px #3C7FB1; 
    box-shadow: 0 0 0 1px #3C7FB1; 
    background: -moz-linear-gradient(top, #EAF6FD 0%, #D9F0FC 50%, #BEE6FD 51%, #A7D9F5 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#EAF6FD), color-stop(0.5,#D9F0FC),color-stop(0.51,#BEE6FD),color-stop(1,#A7D9F5)); 
    background: linear-gradient(top, #EAF6FD 0%, #D9F0FC 50%, #BEE6FD 51%, #A7D9F5 100%); 
} 
a.button:active { 
    padding: 2px 7px 3px 9px; 
    border: 1px solid #73A7C4; 
    border-bottom: 0; 
    -moz-box-shadow: 0 0 0 1px #2C628B; 
    -webkit-box-shadow: 0 0 0 1px #2C628B; 
    box-shadow: 0 0 0 1px #2C628B; 
    background: -moz-linear-gradient(top, #E5F4FC 0%, #C4E5F6 50%, #98D1EF 51%, #68B3DB 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#E5F4FC), color-stop(0.5,#C4E5F6),color-stop(0.51,#98D1EF),color-stop(1,#68B3DB)); 
}
<a class="button" href="#">Click me</a>

http://jsfiddle.net/aUsxy/1/

READ ALSO
Как сделать такую фигуру в svg?

Как сделать такую фигуру в svg?

Как сделать верхнюю границу блока вогнутой, а нижнюю - выпуклой?

309
Выбрать несколько вариантов в тесте

Выбрать несколько вариантов в тесте

Здравствуйте! есть тест, у которого ответы обрабатываются с помощью jQueryС вопросами, которые требуют один вариант ответа нет никаких нареканий,...

338
размеры картинок в webWiew (react native)

размеры картинок в webWiew (react native)

Нужно отобразить локальные xhtml файлы в приложениив хроме картинки отображаются на всю ширину(на скрине слева), а в webview их нужно прокручивать,...

231