How to get solid box-shadow on all sides only using CSS3?-CodePudding

I am trying to make something similar to the button showed in picture.

I tried the following:

.button {
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background: qlineargradient(to bottom, #ededed 5%, #dfdfdf 100%);
    background-color:#ededed;
    border-radius:6px;
    border:1px solid #dcdcdc;
    display:inline-block;
    cursor:pointer;
    color:red;
    font-family:Arial;
    font-size:12px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:0px 1px 0px #ffffff;
}

The above CSS3 code gave me the following:

I am not sure how to make the same button with a border that looks similar to the picture.

CodePudding user response：

first of all the 4 parts of the box shadow are x offset y offset and blur and the spread I did some tweak to your code and got this output.

.button {
        box-shadow:inset 0px 0px 5px 2px #000;
        background: qlineargradient(to bottom, #ededed 5%, #dfdfdf 100%);
        background-color:#ededed;
        border-radius:6px;
        border:1px solid #dcdcdc;
        display:inline-block;
        cursor:pointer;
        color:red;
        font-family:Arial;
        font-size:12px;
        font-weight:bold;
        padding:6px 24px;
        text-decoration:none;
        text-shadow:0px 1px 0px #ffffff;
}

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <title>`substitute(Filename('', 'Page Title'), '^.', '\u&', '')`</title>
    
</head>
<body>

<div >
    quit
</div>


</body>
</html>

CodePudding user response：

There's no CSS property called qlineargradient so it's been removed. The box-shadow property in the example below has 3 values which makes layers top to bottom.

button {
  display: inline-block;
  padding: 6px 24px;
  border: 1px solid #dcdcdc;
  border-radius: 6px;
  color: red;
  font-family: Arial;
  font-size: 12px;
  font-weight: bold;
  text-shadow: 0px 1px 0px #fff;  
  box-shadow: 
  rgba(50, 50, 93, 0.25) 0px 5px 8px -2px,
  rgba(0, 0, 0, 0.35) 0px 3px 6px -3px, 
  rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  background-color: #fff;
  cursor: pointer;
}

button:hover {
  box-shadow: 
  rgba(50, 50, 93, 0.55) 0px 5px 8px -2px,
  rgba(0, 0, 0, 0.35) 0px 3px 6px -3px, 
  rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

<button>QUIT</button>