I suggest you try material design for buttons and menu, like this...
<div class="input-container">
<input
type="text"
id="fname"
name="fname"
value=""
aria-labelledby="label-fname"
/>
<label class="label" for="fname" id="label-fname">
<div class="text">First Name</div>
</label>
</div>
.input-container {
position: relative;
}
input {
height: 48px;
width: 280px;
border: 1px solid #c0c0c0;
border-radius: 4px;
box-sizing: border-box;
padding: 16px;
}
.label {
position: absolute;
top: 0;
bottom: 0;
left: 16px;
display: flex;
align-items: center;
pointer-events: none;
}
input, .label .text {
font-family: 'Segoe UI';
font-size: 16px;
}
.label .text {
transition: all 0.15s ease-out;
color: grey;
}
input:focus {
outline: none;
border: 2px solid blue;
}
input:focus + .label .text, :not(input[value=""]) + .label .text {
font-size: 12px;
transform: translate(0, -150%);
background-color: white;
padding-left: 4px;
padding-right: 4px;
}
input:focus + .label .text {
color: blue;
}
const input = document.getElementById('fname');
input.addEventListener('input', () => {
input.setAttribute('value', input.value);
});
Btn1
<button class="pure-material-button-contained">Button</button>
.pure-material-button-contained {
position: relative;
display: inline-block;
box-sizing: border-box;
border: none;
border-radius: 4px;
padding: 0 16px;
min-width: 64px;
height: 36px;
vertical-align: middle;
text-align: center;
text-overflow: ellipsis;
text-transform: uppercase;
color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255));
background-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
font-family: var(--pure-material-font, "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system);
font-size: 14px;
font-weight: 500;
line-height: 36px;
overflow: hidden;
outline: none;
cursor: pointer;
transition: box-shadow 0.2s;
}
.pure-material-button-contained::-moz-focus-inner {
border: none;
}
/* Overlay */
.pure-material-button-contained::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255));
opacity: 0;
transition: opacity 0.2s;
}
/* Ripple /
.pure-material-button-contained::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
border-radius: 50%;
padding: 50%;
width: 32px; / Safari /
height: 32px; / Safari */
background-color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255));
opacity: 0;
transform: translate(-50%, -50%) scale(1);
transition: opacity 1s, transform 0.5s;
}
Hover, Focus */
.pure-material-button-contained:hover,
.pure-material-button-contained:focus {
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
}
.pure-material-button-contained:hover::before {
opacity: 0.08;
}
.pure-material-button-contained:focus::before {
opacity: 0.24;
}
pure-material-button-contained:hover:focus::before {
opacity: 0.3;
}
/* Active */
.pure-material-button-contained:active {
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.pure-material-button-contained:active::after {
opacity: 0.32;
transform: translate(-50%, -50%) scale(0);
transition: transform 0s;
}
/* Disabled */
.pure-material-button-contained:disabled {
color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.12);
box-shadow: none;
cursor: initial;
}
pure-material-button-contained:disabled::before {
opacity: 0;
}
.pure-material-button-contained:disabled::after {
opacity: 0;
}
Fond
<body>
<div id="cbar">
<div id="nvbar">
</div>
</div>
</body>
}
h1{
color:green;
}
h2{
color:RED;
}
#cbar {
width: 150%;
height: 250px;
background-color: rgb(67, 71, 97);
position: absolute;
z-index: -2;
top: 0;
}
#nvbar {
height: 60px;
width: auto;
background-color: rgb(58, 58, 66);
}
#content {
width: 65%;
height: 500px;
z-index: 3;
background-color: #ddd;
margin-top: 80px;
box-shadow: 1px 1px 1px 1px #ccc;
}
Nav
<div class="nav-header">
<div class="nav-header__menu-show nav-button button-light material-icons" tabindex="0">menu</div>
<div class="nav-header__left-align">
<span class="nav-header__title">Title</span>
<span class="nav-header__title">−</span>
<span>Subtitle</span>
</div>
<div>
<div class="nav-header__side-button nav-button button-light material-icons" tabindex="0">search</div>
<div class="nav-header__side-button nav-button button-light material-icons" tabindex="0">more_vert</div>
</div>
</div>
- {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none; /* Chrome & Safari /
-moz-user-select: none; / Firefox /
-ms-user-select: none; / IE 10+ */
user-select: none;
}
html, body {
margin: 0;
padding: 0;
cursor: default;
}
:root {
--theme-color: #263238;
--accent-color: #ffffff;
--theme-text: #FFF;
background-color: #ffffff;
color: #000;
font-family: 'Roboto', sans-serif;
}
.nav-header {
--nav-button-padding: 7px;
background-color: var(--theme-color, #333);
color: var(--theme-text, #FFF);
width: 100%;
height: 64px;
padding: 12px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
font-size: 18px;
position: fixed;
display: flex;
flex-direction: row;
align-items: center;
overflow: hidden;
}
.nav-header__left-align {
flex: 1;
}
.nav-header__menu-show {
margin-right: 12px;
}
.nav-header__title {
padding-right: 8px;
}
.nav-header__side-button {
margin-left: var(--nav-button-padding, 12px);
}
.nav-button {
padding: var(--nav-button-padding, 12px);
height: 100%;
}
@media screen and (max-width: 480px) {
.nav-header__title {
display: none;
}
}
.button-light:hover {
background-color: rgba(22, 49, 77, 0.14);
}
.button-light:active,
.button-light:focus {
background-color: rgba(255, 255, 255, 0.14);
}
.button-light:focus {
outline: 1px solid #FFF;
}
.button-dark:hover,
.button-dark:active,
.button-dark:focus {
background-color: rgba(0, 0, 0, 0.07);
}
Upload
<input id="upload" hidden type="file"/>
<label for="upload" class="btn btn-primary" tabindex="0">Upload File</label>
body {
padding: 10px;
}
$(document).ready(onLoad);
function onLoad() {
$('label').on('keydown', onKeyDown);
}
function onKeyDown(e) {
const enterKey = 13;
const spaceKey = 32;
if (e.keyCode === enterKey || e.keyCode === spaceKey) {
$('#upload').click();
}
}
