Как сделать вдавленную кнопку на чёрном фоне?

@Ilya90s · Регистрация: 01.11.2012

Студворк — интернет-сервис помощи студентам

Не подскажите, как сделать вдавленную кнопку на чёрном фоне.На белом у меня получилось,хотелось бы на чёрном посмотреть принцип)

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style_main.css">
    <title>Button</title>
</head>
<body>
<div id="main">
<div id="container_white">
  
  <div id="button_white">  </div>
 
</div>
<div id="container_black">
  
  <div id="button_black">  </div>
 
</div>
</div>
 
 
    
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
body{
margin: 0;
padding: 0;
background:#aaa;
}
#main{
width: 1000px;
margin: 0 auto;
}
 
 
#container_white{
margin: 10px 10px;
width: 400px;
height: 400px;
background:#ddd;
border:1px solid rgba(0,0,0,.5);
-webkit-box-shadow:inset 0 0 70px rgba(0,0,0,.25);
-moz-box-shadow: ;
box-shadow: ;
float:left;
}
 
 
#button_white{
margin: 160px auto;
width: 110px;
height: 55px;
background:#ddd;
cursor:pointer;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
 
-webkit-box-shadow: 0 2px 20px rgba(0,0,0,.25),inset 0 1.8px 0px rgba(255,255,255,.6), 0 2px 1px rgba(0,0,0,.1),inset 0 0 17px rgba(0,0,0,.1);
-moz-box-shadow: 0 2px 20px rgba(0,0,0,.25),inset 0 1.8px 0px rgba(255,255,255,.6), 0 2px 1px rgba(0,0,0,.1),inset 0 0 17px rgba(0,0,0,.1);
box-shadow: 0 2px 20px rgba(0,0,0,.25),inset 0 1.8px 0px rgba(255,255,255,.6), 0 2px 1px rgba(0,0,0,.1),inset 0 0 17px rgba(0,0,0,.1);
 
}
 
 
#button_white:hover{
 
-webkit-box-shadow:inset 0 0 20px rgba(0,0,0,.25), 0 1.8px 0px rgba(255,255,255,.4),inset 0 2px 0 rgba(0,0,0,.1);
 
}
 
#button_white::after{
content:'';
background:url([url]http://www.defaulticon.com/sites/default/files/styles/icon-front-page-32x32-preview/public/field/image/3D-Cube.png?itok=IXHcJaTO[/url]) 36px 10px no-repeat;
width: 110px;
height: 55px;
display: block;
opacity:0.7;
}
 
#button_white:hover::after{
content:'';
background:url([url]http://www.defaulticon.com/sites/default/files/styles/icon-front-page-32x32-preview/public/field/image/3D-Cube.png?itok=IXHcJaTO[/url]) 36px 15px no-repeat;
width: 110px;
height: 55px;
display: block;
opacity:0.7;
 
}
 
 
 
 
#container_black{
margin: 10px auto;
width: 400px;
height: 400px;
background:#222;
border:1px solid rgba(255,255,255,.8);
-webkit-box-shadow:inset 0 0 70px rgba(255,255,255,.25);
-moz-box-shadow: ;
box-shadow: ;
float:left;
}
 
 
#button_black{
margin: 160px auto;
width: 110px;
height: 55px;
background:#222;
cursor:pointer;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
 
-webkit-box-shadow: 0 2px 20px rgba(255,255,255,.25), 0 2px 1px rgba(255,255,255,.1),inset 0 0 20px rgba(255,255,255,.1),inset 0 1.8px 0px rgba(0,0,0,.6);
 
 
}
 
 
 
#button_black:hover{
-webkit-box-shadow:inset 0 0 20px rgba(255,255,255,.25),0 0 5px rgba(255,255,255,.4),inset 0 2px 0 rgba(255,255,255,.1), 0 1.8px 10px rgba(0,0,0,.9);
}
 
#button_black::after{
content:'';
background:url([url]http://www.defaulticon.com/sites/default/files/styles/icon-front-page-32x32-preview/public/field/image/display-mac-alt.png?itok=HRlmrx1a[/url]) 36px 10px no-repeat;
width: 110px;
height: 55px;
display: block;
}
 
 
#button_black:hover::after{
content:'';
background:url([url]http://www.defaulticon.com/sites/default/files/styles/icon-front-page-32x32-preview/public/field/image/display-mac-alt.png?itok=HRlmrx1a[/url]) 36px 15px no-repeat;
width: 110px;
height: 55px;
display: block;
 
}

песочница http://jsbin.com/ifadip/4/edit

Добавлено через 1 час 56 минут
Всё получилось)

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .