Как поместить ссылку в css?

-1

<style> 
.button { 
position: relative; 
background-color: #41A0BF; 
border: none; 
font-size: 20px; 
color: #FFFFFF; 
padding: 15px; 
width: 120px; 
text-align: center; 
-webkit-transition-duration: 0.4s; /* Safari */ 
transition-duration: 0.4s; 
text-decoration: none; 
overflow: hidden; 
cursor: pointer; 
} 

.button:after { 
content: ""; 
background: #69D2F5; 
display: block; 
position: absolute; 
padding-top: 300%; 
padding-left: 350%; 
margin-left: -20px!important; 
margin-top: -120%; 
opacity: 0; 
transition: all 0.8s 
} 

.button:active:after { 
padding: 0; 
margin: 0; 
opacity: 1; 
transition: 0s 
} 
</style> 
<button class="button">Home</button>

Как поместить ссылку в кнопку? Я пробовал все коды, доступные в google, но все же ошибки на моем сайте i dont know whats лучший код для этого спасибо за кого-то, кто хочет меня научить.Как поместить ссылку в css?

источник

2016-03-25 Kenny Tan

Нет. Невозможно добавить ссылку через css. Но вы можете использовать JQuery

$('.case').each(function() { 
    var link = $(this).html(); 
    $(this).contents().wrap('<a href="example.com/script.php?id="></a>'); 
});

источник

2016-03-25 05:30:35

Как я могу добавить, что JQuery в мой CSS? –

или куда его поставить? –

Четыре различные возможности кнопки становятся ссылки (CSS не вариант):

.button { 
 
    position: relative; 
 
    background-color: #41A0BF; 
 
    border: none; 
 
    font-size: 20px; 
 
    color: #FFFFFF; 
 
    padding-top: 15px; 
 
    padding-bottom: 15px; 
 
    width: 120px; 
 
    text-align: center; 
 
    overflow: hidden; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    text-decoration: none; 
 
} 
 

 
a, a:active, a:visited, a:focus { 
 
    text-decoration: none; 
 
    color: white; 
 
    font-family: arial, sans-serif; 
 
}

Javascript:<br> 
 
<button class="button" onClick="window.location.href = 'http://example.com'">click</button><br><br> 
 

 
Inner link:<br> 
 
<button class="button"><a href="http://example.com" style="text-decoration: none">click</a></button><br><br> 
 

 
Wrapper link:<br> 
 
<a href="http://example.com"><button class="button">click</button></a><br><br> 
 

 
Fake button:<br> 
 
<a href="http://example.com" class=button>click</a>

источник

2016-03-25 05:31:44

, но как мои эффекты перехода в этой кнопке не видят? –

Этот вопрос касается href. Если вы хотите обсудить переходы на кнопке, мое предложение - открыть еще один вопрос с этой темой. –

Я предлагаю, чтобы добавить якорь тег, если вы хотите добавить ссылку.

<a href="#">Home</a>

Добавить ссылку в "#". Это сработает.

источник

2016-03-25 05:35:09 Vinaya

Я пробовал это раньше, но все еще получал ошибки. –

но как мои эффекты в кнопке он не видит перехода –

Какова ваша цель? Хотите дать ссылку через кнопку или привязку тега? – Vinaya

Пожалуйста, попробуйте следующее:

<a href="https://www.google.co.in/"><button class="button">Home</button></a>

источник

2016-03-25 05:35:26 satya

Я пробовал это раньше, но все еще получал ошибки. –

но как мои эффекты в кнопке он не видит перехода –

Я думаю, что его легкий способ сделать это.

.button { 
 
position: relative; 
 
background-color: #41A0BF; 
 
border: none; 
 
font-size: 20px; 
 
color: #FFFFFF; 
 
padding: 15px; 
 
width: 120px; 
 
text-align: center; 
 
-webkit-transition-duration: 0.4s; /* Safari */ 
 
transition-duration: 0.4s; 
 
text-decoration: none; 
 
overflow: hidden; 
 
cursor: pointer; 
 
} 
 

 
.button:after { 
 
content: ""; 
 
background: #69D2F5; 
 
display: block; 
 
position: absolute; 
 
padding-top: 300%; 
 
padding-left: 350%; 
 
margin-left: -20px!important; 
 
margin-top: -120%; 
 
opacity: 0; 
 
transition: all 0.8s 
 
} 
 

 
.button:active:after { 
 
padding: 0; 
 
margin: 0; 
 
opacity: 1; 
 
transition: 0s 
 
} 
 
a{ 
 
    text-decoration:none; 
 
}

<a href="https://www.google.co.in"><button class="button">Home</button></a>

источник

2016-03-25 05:43:46

Я пробовал это, но мой эффект перехода в кнопку не видит –

, но эта ссылка в кнопке работает для меня, но я хочу увидеть мои эффекты перехода прежде, чем перейти к следующей странице –

Хотя браузеры, вероятно, будут обрабатывать разметку, кнопка внутри ссылки недействительна HTML. – steveax

Вы можете иметь ссылку в виде кнопки таким образом

<a href="#" class="button">home</a>

Или, если вы используете библиотеку CSS как бутстрапе

<a href="#" class="btn btn-default">home</a>

источник

2016-03-25 05:48:14 AntonyMN

, но как мои эффекты в кнопке не видят перехода –

Класс = «кнопка» вызывает функции css – AntonyMN

он не работает для меня –

Как поместить ссылку в css?

ответ

Смежные вопросы