Box shadow with transparent layer-CodePudding

I am trying to create a button with box-shadow like below:

with transparent space between the button and the shadow. How can it be implemented?

CodePudding user response：

.button-wrapper {
    margin: 0 auto;
    display: table;
    padding: 100px 0;
    background-color: #625e5e;
    width: 100%;
    text-align: center;
}

.button-wrapper button.custom-btn {
    border: 0;
    background-color: transparent;
    padding: 0px 0px;
    border-radius: 100px;
    color: #fff;
    border: 5px transparent solid;
    outline: 5px rebeccapurple solid; 
}

body {
    margin: 0;
}

.button-wrapper button.custom-btn span {
    border: 0;
    background-color: rebeccapurple;
    padding: 10px 0px;
    border-radius: 100px;
    min-width: 115px;
    color: #fff;
    font-size: 15px;
    letter-spacing: 2px;
    display: block;
    border: 5px transparent solid;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
</head>
<body>
    <div >
        <button type="button" >
            <span >Action</span>
        </button>
    </div>
</body>
</html>

CodePudding user response：

Box shadow is not really what you want here as you do not wish to create a shadow of the object. You can instead use the outline css property.

.btn {
  display: inline-block;
  margin: 20px;
  padding: 15px 30px;
  background-color: #aaa;
  border-radius: 25px;
  outline: 4px solid #aaa;
  outline-offset: 4px;
}

<div >
  Action
</div>