Implement button visuals
This commit is contained in:
@@ -31,7 +31,7 @@ body{
|
||||
.nav-bottom{
|
||||
background-color:aliceblue;
|
||||
|
||||
|
||||
z-index:2;
|
||||
padding:0.5rem;
|
||||
height: 1.5rem;
|
||||
width:100%;
|
||||
@@ -45,12 +45,16 @@ body{
|
||||
margin-bottom: 0.5rem;
|
||||
margin-right:0.5rem;
|
||||
margin-left: auto;
|
||||
width:4.5rem;
|
||||
height:4.5rem;
|
||||
padding:auto;
|
||||
border-radius: 10em;
|
||||
outline: none;
|
||||
/* Button - Secondary color */
|
||||
background-color:royalblue;
|
||||
border:0;
|
||||
border-radius: 5em;
|
||||
border:0.5rem royalblue solid;
|
||||
color:white;
|
||||
font-size: 2;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.nav-bottom-pad{
|
||||
@@ -62,9 +66,17 @@ body{
|
||||
.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-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-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-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);
|
||||
}
|
Reference in New Issue
Block a user