commit 34387d6ecef14aed66c899742923f05ba2095f0d
parent 83653f56c69a46b2a21cc970ea07a1e19bf87f04
Author: Nathanael Gentry <ngentry1@liberty.edu>
Date: Tue, 18 Jun 2019 21:46:24 -0400
Add command button
Diffstat:
8 files changed, 45 insertions(+), 0 deletions(-)
diff --git a/base.css b/base.css
@@ -136,6 +136,48 @@ a {
display: block;
content: "";
}
+.content .command_button,
+.content .command_button:active {
+ height: 26px;
+ position: relative;
+ border: none;
+ margin-bottom: 7px;
+ margin-left: 14px;
+ cursor: pointer;
+}
+.content .command_button {
+ background: url(img/button/button-mid.png);
+}
+.content .command_button:before {
+ left: -7px;
+ background: url(img/button/button-front.png) no-repeat;
+}
+.content .command_button:after {
+ right: -7px;
+ background: url(img/button/button-back.png) no-repeat;
+}
+.content .command_button:active {
+ background: url(img/button/button-mid-pressed.png);
+ color: white;
+}
+.content .command_button:active:before {
+ left: -7px;
+ background: url(img/button/button-front-pressed.png) no-repeat;
+}
+.content .command_button:active:after {
+ right: -7px;
+ background: url(img/button/button-back-pressed.png) no-repeat;
+}
+.content .command_button:before,
+.content .command_button:after,
+.content .command_button:active:before,
+.content .command_button:active:after {
+ position: absolute;
+ top: 0;
+ height: 26px;
+ width: 7px;
+ content: "";
+}
/* Hide only visually, but have it available for screenreaders & for SEO purposes. See h5bp.com/v */
.visuallyhidden {
diff --git a/img/button/button-back-pressed.png b/img/button/button-back-pressed.png
Binary files differ.
diff --git a/img/button/button-back.png b/img/button/button-back.png
Binary files differ.
diff --git a/img/button/button-front-pressed.png b/img/button/button-front-pressed.png
Binary files differ.
diff --git a/img/button/button-front.png b/img/button/button-front.png
Binary files differ.
diff --git a/img/button/button-mid-pressed.png b/img/button/button-mid-pressed.png
Binary files differ.
diff --git a/img/button/button-mid.png b/img/button/button-mid.png
Binary files differ.
diff --git a/index.html b/index.html
@@ -7,6 +7,7 @@
<link rel="stylesheet" href="base.css">
</head>
<body>
+ <noscript><p><em>This page requires JavaScript.</em></p></noscript>
<div id="content" class="content">
<div class="closebox"><a class="closebox-innr"></a></div>
<div class="maxbox"><div class="maxbox-innr"></div></div>
@@ -15,5 +16,7 @@
<ul>
<li><class "s">A system error has occurred. Please reboot your Mac.</li>
</ul>
+ <button class="command_button">Reboot</button>
+ </div>
</body>
</html>
