HTML Como fazer um link ocupar toda div

[fredkissfree]

Bom dia, preciso que meu div vire um botão, ou seja, toda a área inclusive o padding seja um link.

 

Vi na internet algo de display:block mas não soube utiliza-lo.

 

Segue meu div:

 

<div class="col-md-4 col-sm-6">
  <div class="card-big-shadow">
    <div class="card card-just-text" data-background="color" data-color="blue" data-radius="none">
      <div class="card-body">
        <h6 class="card-category">Categoria</h6>
        <h4 class="card-title">Título</h4>
        <p class="card-description">Descrição</p>
      </div>
    </div>
  </div>
</div>

Obrigado

adicionado 14 minutos depois

Eu fiz assim mas não sei se ta certo:

a.fill-div {
    display: block;
    height: 100%;
    width: 100%;
}

e no código:

<div class="col-md-4 col-sm-6">
  <a href="#" class="fill-div">
    <div class="card-big-shadow">
      <div class="card card-just-text" data-background="color" data-color="blue" data-radius="none">
        <div class="card-body">
          <h6 class="card-category">TEXTO</h6>
          <h4 class="card-title">Educação Infantil</h4>
          <p class="card-description">Texto</p>
        </div>
      </div>
      <!-- end card -->
    </div>
  </a>
</div>

Está correta esta maneira?

[Paulo Henrique Frizon]

A área de padding não é utilizável...

Tenta colocar um "display block" no link e vai definindo as dimensões.

[fredkissfree]

ué não foi o que eu fiz? @Paulo Henrique Frizon

[DiF]

@fredkissfree Na verdade o @Paulo Henrique Frizon  está corretíssimo.  Tem de usar o display block, porém o jeito que você deixou a estrutura  html está errada.

 

Você quer que "tudo" vire um link certo? todo o elemento DIV... então naturalmente você tem que por todos os elementos dentro do link.

<a href="#" class="fill-div">
   <div class="col-md-4 col-sm-6">
        <div class="card-big-shadow">
             <div class="card card-just-text" data-background="color" data-color="blue" data-radius="none">
                   <div class="card-body">
                        <h6 class="card-category">TEXTO</h6>
                       <h4 class="card-title">Educação Infantil</h4>
                       <p class="card-description">Texto</p>
                    </div>
             </div>
             <!-- end card -->
       </div>
    </div>
</a>

E então no CSS definir a regra:

.fill-div{
  display: block; 
}

Exemplo online: http://jsfiddle.net/7otebucd/2/

[fredkissfree]

@DiF e @Paulo Henrique Frizon Obrigado

 

[christian_lucky1234]

<div style=" box-shadow: 1px 1px 4px 8px; width: 180px; height: 29px; border: solid 1.3px #0000ff; border-radius: 4px; background: #0000ff70">

      <a style="display: block; transform: translate (-30px, -4.5px); width: 180px; height: 29px;" href="https://exemplo.com">Vá para o site</a>

</div>

 

Vua lá ! Um botão simples... fiz o exemplo com CSS na linha, basta levar para a folha de estilo e ir ajustando a área com "height, width e transform: translate(X , y)"