CODEWITHSUNDEEP
htmlcss
New
New

Reputation: 13

Achieving exactly the same box shadow all around a button

I have a box shadow on top which I want to have all the way around a button. How do I do this? 

.btn.btn-filled {
  color: white !important;
  padding: 2px;
  box-shadow: 0px -5px 5px -5px #808080;
}
<div>
  <a class="btn btn-lg btn-filled" href="https://adsler.co.uk">Design</a>
  <a class="btn btn-lg btn-white" href="http://4309.co.uk/portraits/">Illustration</a>
</div>

view here

Upvotes: 0

Views: 134

Answers (4)

Stanley Fernandes
Stanley Fernandes

Reputation: 432

<!Doctype>
<html>
<head>
    <style>
    .allblur
    {
        width:350px;height:200px;
        border: solid 1px #555;
        background-color: #eed;
        box-shadow:  0 0 10px 5px rgba(0,0,0,0.6);
        -moz-box-shadow: 0 0 10px  5px rgba(0,0,0,0.6);
        -webkit-box-shadow: 0 0 10px 5px rgba(0,0,0,0.6);
        -o-box-shadow: 0 0 10px 5px rgba(0,0,0,0.6);
    }
    </style>
</head>
<body>
    <div class="allblur">
    </div>
</body>
</html>

Upvotes: 0

Soothran
Soothran

Reputation: 1243

Hope this helps.

div {
  padding: 10px;
}

.btn.btn-filled {
  color: white !important;
  padding: 10px 30px;
  background: #000;
  border-radius: 50px;
  -webkit-box-shadow: 0px 0px 5px 1px rgba(128, 128, 128, 0.9);
  -moz-box-shadow: 0px 0px 5px 1px rgba(128, 128, 128, 0.9);
  box-shadow: 0px 0px 5px 1px rgba(128, 128, 128, 0.9);
}
<div>
  <a class="btn btn-lg btn-filled" href="https://adsler.co.uk">Design</a>
  <a class="btn btn-lg btn-white" href="http://4309.co.uk/portraits/">Illustration</a>
</div>

Upvotes: 0

adel
adel

Reputation: 3507

button{
    background: #000000 !important;
    border: 2px solid #000000 !important;
    color:white;
    border-radius:50px;
    padding:10px 30px;
    box-shadow: 0px 0px 10px 0px #808080;
    }
<button>
Design</button>

this what you are looking for :

box-shadow: 0px 0px 10px 5px #808080;

Upvotes: 1

Tanbir Ahmod
Tanbir Ahmod

Reputation: 503

@New, this is very simple. If you use box-shadow: 0 0 0 10px #000; this way then you will get around the shadow of button.

Thanks.

Upvotes: 0

Related Questions