0

Gostaria de adicionar um link na card pra redirecionar pra outra página. Gostaria de deixar a card toda clicável e gostaria e mudar a de fundo dela e ela ficou um pouco grande consigo diminuir ela?

Alguém poderia me ajudar?

.loginUser{
	position:relative;
	left: 50%;
  margin-left:-154px;
	margin-right: 50%;
	width: 308px;
	text-align: center;
}



.fa-pb_icon-gradient:before {
    background: #2980b9;
    background: -moz-linear-gradient(45deg, #2980b9 0%, #2c3e50 100%);
    background: -webkit-linear-gradient(45deg, #2980b9 0%, #2c3e50 100%);
    background: -o-linear-gradient(45deg, #2980b9 0%, #2c3e50 100%);
    background: linear-gradient(45deg, #2980b9 0%, #2c3e50 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}




element.style {
}
.prodct1 {
}
.p-3 {
    padding: 1rem !important;
}
.border {
    border: 1px solid #dee2e6 !important;
}
*, *::before, *::after {
    box-sizing: border-box;
}
user agent stylesheet
div {
    display: block;
}
.text-center {
    text-align: center !important;
}
html, body {
    margin: 0;
    font-size: 100%;
    font-family: 'Niramit', sans-serif;
    background: #fff;
}
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
}
:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: transparent;
}
user agent stylesheet
html {
    color: -internal-root-color;
}
*, *::before, *::after {
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: border-box;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen"
        href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen"
        href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
    <style>

    </style>
</head>

<body>
<!------ Include the above in your HEAD tag ---------->
  
<div class="container">
  <div class="row">
    <div class="col-sm">
     <div class="card bg-transparent text-white text-center p-3">
       <div class="log"><section class="loginUser"><!--avatar - icon font awesome-->
<i class="fa fa-flask fa-3x fa-pb_icon-gradient"></i><!--Call to action-->
<h5><span style="color: #2c3e50;"><strong>Laboratórios Oficiais</strong></span></h5>
</section></div>
      </div>
    </div>
    <div class="col-sm">
     <div class="card bg-transparent text-white text-center p-3">
       <div class="log"><section class="loginUser"><!--avatar - icon font awesome-->
<i class="fa fa-flask fa-3x fa-pb_icon-gradient"></i><!--Call to action-->
<h5><span style="color: #2c3e50;"><strong>Laboratórios Oficiais</strong></span></h5>
</section></div>
      </div>
    </div>
    
  </div>
</div>
 
  </html>  
  
  
      <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>

</html>  
  
  

5
  • Diminuir em que sentido?
    – Meu ovo
    20/07/2019 às 20:23
  • diminuir o tamanho da card
    – Ludi
    20/07/2019 às 21:24
  • "Diminuir" é mt amplo. Poderia ser largura, altura, tamanho do texto, ícone, espaçamento interno etc etc.
    – Meu ovo
    20/07/2019 às 21:27
  • é altura, tentei colocar seu exemplo mas não deu certo.
    – Ludi
    20/07/2019 às 21:37
  • Meu exemplo não tratou do tamanho, apenas da questão de ser clicável. Além de correções do CSS.
    – Meu ovo
    20/07/2019 às 21:38

2 Respostas 2

1

É só mudar a tag do card para <a> e colocar um atributo href com a URL pra onde você quer que vá ao ser clicado.

Agora, não precisa desses estilos que você colocou na classe .loginUser que, com todo respeito, parece ser gambiarra:

/*.loginUser{
	position:relative;
	left: 50%;
  margin-left:-154px;
	margin-right: 50%;
	width: 308px;
	text-align: center;
  background: red;
}*/



.fa-pb_icon-gradient:before {
    background: #2980b9;
    background: -moz-linear-gradient(45deg, #2980b9 0%, #2c3e50 100%);
    background: -webkit-linear-gradient(45deg, #2980b9 0%, #2c3e50 100%);
    background: -o-linear-gradient(45deg, #2980b9 0%, #2c3e50 100%);
    background: linear-gradient(45deg, #2980b9 0%, #2c3e50 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}




element.style {
}
.prodct1 {
}
.p-3 {
    padding: 1rem !important;
}
.border {
    border: 1px solid #dee2e6 !important;
}
*, *::before, *::after {
    box-sizing: border-box;
}
user agent stylesheet
div {
    display: block;
}
.text-center {
    text-align: center !important;
}
html, body {
    margin: 0;
    font-size: 100%;
    font-family: 'Niramit', sans-serif;
    background: #fff;
}
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
}
:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: transparent;
}
user agent stylesheet
html {
    color: -internal-root-color;
}
*, *::before, *::after {
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: border-box;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen"
        href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen"
        href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
    <style>

    </style>
</head>

<body>
<!------ Include the above in your HEAD tag ---------->
  
<div class="container">
  <div class="row">
    <div class="col-sm">
     <a href="URL" class="card bg-transparent text-white text-center p-3">
       <div class="log"><section class="loginUser"><!--avatar - icon font awesome-->
<i class="fa fa-flask fa-3x fa-pb_icon-gradient"></i><!--Call to action-->
<h5><span style="color: #2c3e50;"><strong>Laboratórios Oficiais</strong></span></h5>
</section></div>
      </a>
    </div>
    <div class="col-sm">
     <a href="URL" class="card bg-transparent text-white text-center p-3">
       <div class="log"><section class="loginUser"><!--avatar - icon font awesome-->
<i class="fa fa-flask fa-3x fa-pb_icon-gradient"></i><!--Call to action-->
<h5><span style="color: #2c3e50;"><strong>Laboratórios Oficiais</strong></span></h5>
</section></div>
      </a>
    </div>
    
  </div>
</div>
 
  </html>  
  
  
      <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>

</html>

1

É basicamente só colocar o link por fora do card.

<a href="https://google.com">
  <div class="card bg-transparent text-white text-center p-3">
    ...
  </div>
</a>

E no CSS teria algo como a:hover .card { background-color: red !important; }

O código completo ficara assim. Repare que eu precisei usar !important para a cor pegar no card.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
<style>
    .loginUser {
        position: relative;
        left: 50%;
        margin-left: -154px;
        margin-right: 50%;
        width: 308px;
        text-align: center;
    }



    .fa-pb_icon-gradient:before {
        background: #2980b9;
        background: -moz-linear-gradient(45deg, #2980b9 0%, #2c3e50 100%);
        background: -webkit-linear-gradient(45deg, #2980b9 0%, #2c3e50 100%);
        background: -o-linear-gradient(45deg, #2980b9 0%, #2c3e50 100%);
        background: linear-gradient(45deg, #2980b9 0%, #2c3e50 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }




    element.style {}

    .prodct1 {}

    .p-3 {
        padding: 1rem !important;
    }

    .border {
        border: 1px solid #dee2e6 !important;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    user agent stylesheet div {
        display: block;
    }

    .text-center {
        text-align: center !important;
    }

    html,
    body {
        margin: 0;
        font-size: 100%;
        font-family: 'Niramit', sans-serif;
        background: #fff;
    }

    body {
        margin: 0;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #212529;
        text-align: left;
        background-color: #fff;
    }

    :root {
        --blue: #007bff;
        --indigo: #6610f2;
        --purple: #6f42c1;
        --pink: #e83e8c;
        --red: #dc3545;
        --orange: #fd7e14;
        --yellow: #ffc107;
        --green: #28a745;
        --teal: #20c997;
        --cyan: #17a2b8;
        --white: #fff;
        --gray: #6c757d;
        --gray-dark: #343a40;
        --primary: #007bff;
        --secondary: #6c757d;
        --success: #28a745;
        --info: #17a2b8;
        --warning: #ffc107;
        --danger: #dc3545;
        --light: #f8f9fa;
        --dark: #343a40;
        --breakpoint-xs: 0;
        --breakpoint-sm: 576px;
        --breakpoint-md: 768px;
        --breakpoint-lg: 992px;
        --breakpoint-xl: 1200px;
        --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    }

    html {
        font-family: sans-serif;
        line-height: 1.15;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        -ms-overflow-style: scrollbar;
        -webkit-tap-highlight-color: transparent;
    }

    user agent stylesheet html {
        color: -internal-root-color;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    a:hover .card {
        background-color: red !important;
    }
</style>
</head>

<body>



    <div class="container">
        <div class="row">
            <div class="col-sm">
                <a href="https://google.com">
                    <div class="card bg-transparent text-white text-center p-3">
                        <div class="log">
                            <section class="loginUser">
                                <!--avatar - icon font awesome-->
                                <i class="fa fa-flask fa-3x fa-pb_icon-gradient"></i>
                                <!--Call to action-->
                                <h5><span style="color: #2c3e50;"><strong>Laboratórios Oficiais</strong></span></h5>
                            </section>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-sm">
<a href="https://google.com">
                <div class="card bg-transparent text-white text-center p-3">
                    <div class="log">
                        <section class="loginUser">
                            <!--avatar - icon font awesome-->
                            <i class="fa fa-flask fa-3x fa-pb_icon-gradient"></i>
                            <!--Call to action-->
                            <h5><span style="color: #2c3e50;"><strong>Laboratórios Oficiais</strong></span></h5>
                        </section>
                    </div>
                </div>
</a>
            </div>
        </div>

        <div class="row">
            <div class="col-sm">
                <a href="https://google.com">
                    <div class="card bg-transparent text-white text-center p-3">
                        <div class="log">
                            <section class="loginUser">
                                <!--avatar - icon font awesome-->
                                <i class="fa fa-flask fa-3x fa-pb_icon-gradient"></i>
                                <!--Call to action-->
                                <h5><span style="color: #2c3e50;"><strong>Laboratórios Oficiais</strong></span></h5>
                            </section>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-sm">
<a href="https://google.com">
                <div class="card bg-transparent text-white text-center p-3">
                    <div class="log">
                        <section class="loginUser">
                            <!--avatar - icon font awesome-->
                            <i class="fa fa-flask fa-3x fa-pb_icon-gradient"></i>
                            <!--Call to action-->
                            <h5><span style="color: #2c3e50;"><strong>Laboratórios Oficiais</strong></span></h5>
                        </section>
                    </div>
                </div>
</a>
            </div>
        </div>


    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>

</html>

2
  • Olá hugo o seu deu certo, mas quando eu coloquei link nas duas card, a parte debaixo tambem pegou o link da card
    – Ludi
    20/07/2019 às 21:25
  • @Ludi editei o código e coloquei o link nos dois cards... aparentemente está funcionando normal tanto o primeiro quanto o segundo... Vc poderia me explicar melhor o que seria essa "parte de baixo" ? Aqui estão tudo dentro do normal, o link está só no card
    – hugocsl
    20/07/2019 às 22:01

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .