atreyabain/nodejs-fm
1
0
Fork 0
Code Issues Pull Requests Wiki Activity

Implement button visuals

Browse Source
This commit is contained in:
Atreya Bain
2019-05-20 12:51:35 +05:30
parent a8754d2f03
commit 0436a6b0ce
2 changed files with 19 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
static/base.css
View File

@@ -31,7 +31,7 @@ body{
.nav-bottom{ .nav-bottom{
background-color:aliceblue; background-color:aliceblue;
z-index:2;
padding:0.5rem; padding:0.5rem;
height: 1.5rem; height: 1.5rem;
width:100%; width:100%;
@@ -45,12 +45,16 @@ body{
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
margin-right:0.5rem; margin-right:0.5rem;
margin-left: auto; margin-left: auto;
width:4.5rem;
height:4.5rem;
padding:auto;
border-radius: 10em;
outline: none;
/* Button - Secondary color */ /* Button - Secondary color */
background-color:royalblue; background-color:royalblue;
border:0; border:0.5rem royalblue solid;
border-radius: 5em;
color:white; color:white;
font-size: 2; font-size: 2rem;
} }
.nav-bottom-pad{ .nav-bottom-pad{
@@ -62,9 +66,17 @@ body{
.box-shadow-1{ .box-shadow-1{
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
} }
.box-shadow-2{ .box-shadow-2, .box-shadow-1-active:active{
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
} }
.box-shadow-3{ .box-shadow-3, .box-shadow-2-active:active{
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
} }
.box-shadow-4, .box-shadow-3-active:active{
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.box-shadow-1-active,.box-shadow-2-active,.box-shadow-3-active{
transition: box-shadow 0.3s cubic-bezier(.25,.8,.25,1);
}

2
static/index.html
View File

@@ -28,7 +28,7 @@
<div class="nav-bottom-pad"></div> <div class="nav-bottom-pad"></div>
<div class="nav-bottom-container"> <div class="nav-bottom-container">
<div class="nav-bottom-button-container"> <div class="nav-bottom-button-container">
<button class="nav-bottom-button box-shadow-3">+</button> <button class="nav-bottom-button box-shadow-3 box-shadow-3-active">+</button>
</div> </div>
<div class="nav-bottom box-shadow-3"> <div class="nav-bottom box-shadow-3">
NAV-BOTTOM NAV-BOTTOM