Big Blue 3D Panel

by Timar

HTML

<!DOCTYPE html>
<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
<style>


</style>
</head>

<body>
  <div class="element">
    <button class="button">Anmelden</button>
    <button class="button2">Anmelden</button>
    </button>
    <div>

    </div>
</body>

</html>

CSS

.button {
    width: 700px;
    height: 175px;
    z-index: 6;
    text-shadow: 0.5px 1px 0px rgba(205, 205, 205, 1), 1px 1.5px 1px rgba(0, 0, 0, 0.5);
    transition-duration: 0.6s;
    background-color: rgb(47, 93, 104);
    color: white;
    padding: 8px 25px;
    text-decoration: none;
    text-align: center;
    margin: auto;
    font-family: "Titillium Web";
    font-size: 24px;
    cursor: pointer;
    border-radius: 35px;
    line-height: 22px;
    border: none;
    box-shadow:/* new mobile gradient */0 14px 0 0 rgb(40, 76, 84), 0 7px 0 0 #2f5d68, inset 0 -1.5px 0 0 rgba(255, 255, 255, 0.15), inset 4px -35px 80px 0 rgba(255, 255, 255, 0.1), 20px 32px 60px 0 rgba(0, 0, 0, 0.5)
    
    // old gradient /* shadow Gradient */ 0px 1px 1px 0px rgba(147, 193, 204, 0.03), 0px 3px 1px 0px rgba(147, 193, 204, 0.03), 0px 5px 1px 0px rgba(147, 193, 204, 0.03), 0px 7px 1px 0px rgba(147, 193, 204, 0.03), 0px 9px 1px 0px rgba(147, 193, 204, 0.03), 0px 11px 1px 0px rgba(147, 193, 204, 0.03), 0px 13px 1px 0px rgba(147, 193, 204, 0.03), 0px 15px 1px 0px rgba(147, 193, 204, 0.03), 0px 17px 1px 0px rgba(147, 193, 204, 0.03), 0px 19px 1px 0px rgba(147, 193, 204, 0.03), 0px 21px 1px 0px rgba(147, 193, 204, 0.03), 0px 23px 1px 0px rgba(147, 193, 204, 0.03), /* 3d Darken */ 0px 25px 0px 0px rgba(0, 0, 0, 0.25), /* 3D Original Color */ 0px 25px 0px 0px rgba(47, 93, 104, 1), /*Top 3D*/ inset 0px -2px 0px 0px rgba(255, 255, 255, 0.15), inset 4px -35px 80px 0px rgba(255, 255, 255, 0.1);
}

.button2 {
  width: 700px;
    height: 175px;
    z-index: 6;
    text-shadow: 0.5px 1px 0px rgba(205, 205, 205, 1), 1px 1.5px 1px rgba(0, 0, 0, 0.5);
    transition-duration: 0.6s;
    background-color: rgb(47, 93, 104);
    color: white;
    padding: 8px 25px;
    text-decoration: none;
    text-align: center;
    margin: auto;
    font-family: "Titillium Web";
    font-size: 24px;
    cursor: pointer;
    border-radius: 35px;
    line-height: 22px;
    border: none;
  box-shadow: 0 17px 0 0...