halfmagic
4/14/2020 - 5:34 AM

button temp-placeholder for dev newmorphism style

.temp{
  background-color: #f1f3f6;
  margin: 8px;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  color:#989cd0;
  box-shadow: 
    inset 0 0 15px rgba(55, 84, 170,0),
    inset 0 0 20px rgba(255, 255, 255,0),
    7px 7px 15px rgba(55, 84, 170, .2),
    -7px -7px 20px rgba(255, 255, 255, 1),
    inset 0px 0px 4px rgba(255, 255, 255,.2);
  -webkit-transition: background-color 0.3s ease-out 0.2s, box-shadow 0.3s ease 0.05s;
  -moz-transition: background-color 0.3s ease-out 0.2s, box-shadow 0.3s ease 0.05s;
  -o-transition: background-color 0.3s ease-out 0.2s, box-shadow 0.3s ease 0.05s;
  transition: background-color 0.3s ease-out 0.2s, box-shadow 0.3s ease 0.05s;
}
.temp:hover{
  background-color: #ddd;
  box-shadow: 
    inset 7px 7px 15px rgba(55, 84, 170,.15),
    inset -7px -7px 20px rgba(255, 255, 255,1),
    0px 0px 4px rgba(255, 255, 255,.2);
  -webkit-transition: background-color 0.3s ease-out 0.2s, box-shadow 0.2s ease 0.05s;
  -moz-transition: background-color 0.3s ease-out 0.2s, box-shadow 0.2s ease 0.05s;
  -o-transition: background-color 0.3s ease-out 0.2s, box-shadow 0.2s ease 0.05s;
  transition: background-color 0.3s ease-out 0.2s, box-shadow 0.2s ease 0.05s;
}