Целая кнопка Clickable

Я мало что знаю о HTML, в основном только то, чему я научил себя (так что если вы ответите, не говорите на языке разработчика, хе-хе). Мне нужна кнопка ниже, чтобы ее можно было щелкнуть, а не только текст. Я изучал весь Google, но не могу это решить. Также углы появляются только в некоторых браузерах и квадратах в других, есть ли способ заставить его казаться округленным в большинстве, если не во всех браузерах?Целая кнопка Clickable

<tbody> 
<tr> 
<td> 
<table style="background-color: #434242; border: 4px solid #ffffff; border-radius: 30px; -moz-border radius: 30px -webkit-border-radius: 30px;" border="0" width="20%" cellspacing="0" cellpadding="0"> 
<td style="color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 12px; letter-spacing: -.20px; line-height: 100%; padding: 8px 8px 8px 8px;" align="center" valign="middle"><a style="color: #ffffff; text-decoration: none;" href="http://www.myurl.com">MY SITE</a></td> 
</tr> 
</tbody> 
</table> 
</td>

источник

2014-12-02 QHDC Australia

Просто подсказка: положить элементы моделирования в отдельном CSS-файл. Поместить его в ваш html-файл - это не правильный способ сделать это. – Stan

Спасибо за это! –

Большая часть контента продукта на нашем сайте загружается из нашего пакета бухгалтерского учета и базы данных нашей компании, а остальная часть - из CMS. CSS заблокированы и принадлежат третьей стороне компании, которые обвиняют, как раненый бык, за любые изменения CSS. Я должен обойти это, сделав все в HTML самостоятельно :( –

Если вы не возражаете против использования onClick вы могли бы просто сделать это:

Добавить cursor:pointer в td который превращает курсор в указатель руки и добавить onClick="window.location = http://www.stackoverflow.com;" что JavaScript, что когда деталь будет нажата , он посылает пользователю http://www.stackoverflow.com

<tbody> 
 
    <tr> 
 
    <td> 
 

 
     <table style="background-color: #434242; border: 4px solid #ffffff; border-radius: 30px; -moz-border radius: 30px -webkit-border-radius: 30px;" border="0" width="20%" cellspacing="0" cellpadding="0"> 
 
     <td style="color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 12px; letter-spacing: -.20px; line-height: 100%; padding: 8px 8px 8px 8px; cursor:pointer;" align="center" valign="middle" onClick="window.location = http://www.stackoverflow.com;">MY SITE 
 
     </td> 
 
     </table> 
 
    </td> 
 
    </tr> 
 
</tbody>

ИЛИ

Wrap ссылка (<a>) вокруг внутреннего table* не будет работать на старых браузерах *:

<tbody> 
 
    <tr> 
 
    <td> 
 
     <a style="color: #ffffff; text-decoration: none;" href="http://www.myurl.com"> 
 
     <table style="background-color: #434242; border: 4px solid #ffffff; border-radius: 30px; -moz-border radius: 30px -webkit-border-radius: 30px;" border="0" width="20%" cellspacing="0" cellpadding="0"> 
 
      <td style="color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 12px; letter-spacing: -.20px; line-height: 100%; padding: 8px 8px 8px 8px;" align="center" valign="middle">MY SITE</td> 
 
     </table> 
 
     </a> 
 
    </td> 
 
    </tr> 
 
</tbody>

источник

2014-12-02 22:05:04

Обратите внимание, что это вызовет проблемы в более старые браузеры. См. http://stackoverflow.com/questions/1457439/anchor-tag-around-table-is-not-clickable-in-ie-6-7-8 – nullability

@nullability Попытка сохранить его просто для нового но это правильно. –

Это не очень хорошая практика. Площадь за пределами TD/Table также становится слишком интерактивной. –

просто добавив следующее правило к вашему CSS

a { 
    display:block; 
    width:100%; 
    height:100%; 
}

Вот скрипка: http://jsfiddle.net/aka8uc0f/1/

источник

2014-12-02 22:09:27

Обложки большинства, но не всех кнопок. Мне нравится эта попытка. –

@SimplyCraig True. Исправлено. Обновлен скрипт –

Спасибо за это, к сожалению, у меня нет доступа к нашему CSS, поскольку они принадлежат компании, которая взимает триллионы долларов, чтобы внести в них какие-либо изменения. –

Вам это нужно, чтобы быть в теге стола? Если нет, то было бы легче просто стиль самой ссылки, как это:

<a style="padding: 6px 35px; background-color: #434242; color: #fff; text-transform: uppercase; letter-spacing: -.2px; text-decoration: none; font-family: helvetica,arial,sans-serif; border-radius: 20px; font-size: 12px;" href="http://myurl.com">My Site</a>

Кроме того, вы можете добавить то, что называется класс по ссылке и определить класс в CSS вашего сайта.

<head> 
<style type="text/css"> 
.mysite-button {padding: 6px 35px; 
background-color: #434242; 
color: #fff; 
text-transform: uppercase; 
letter-spacing: -.2px; 
text-decoration: none; 
font-family: helvetica,arial,sans-serif; 
border-radius: 20px; 
font-size: 12px;} 
</style> 
</head> 


<body> 


<a class="mysite-button" href="http://myurl.com">My Site</a> 
</body>

См ссылку здесь, чтобы просмотреть все эти в действии: http://jsfiddle.net/nk365o77/

источник

2014-12-02 22:12:25 JSilv

Так как вы после того, как кнопки, вы должны использовать соответствующий тег.

<button> 
    Submit 
</button>

А затем создайте свой элемент html в отдельном файле css. Например,

button { 
background-color: #ccc; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
border-radius:6px; 
color: #fff; 
font-family: 'Oswald'; 
font-size: 20px; 
text-decoration: none; 
cursor: pointer; 
border:none; 
}

См. Fiddle, под вашей кнопкой.

источник

2014-12-02 22:13:52

Большое спасибо за это! –

О закругленные углы. Вы забыли «;» знак.

Неправильно:

border-radius: 30px; -moz-border radius: 30px -webkit-border-radius: 30px;"

Правильно:

border-radius: 30px; -moz-border radius: 30px; -webkit-border-radius: 30px;"

источник

2014-12-02 22:15:03 Stan

Going начинающему маршрут, а?

HTML должен быть семантическим, поэтому, возможно, таблица не является лучшим вариантом для этого. Вы также должны следить за порядком, в который вы помещаете свой код. Утомляйтесь встроенными стилями (помещая стиль непосредственно в html). Это приводит к разного рода хаосу, когда вы продвигаетесь, и это тоже утомительно! Icky.

Надеюсь, это решение, которое вы ищете. Вы знаете, как связать файл css?

http://jsfiddle.net/gw3n1vmp/1/ < - посмотреть, как она работает

<style> 
table { 
    background: #434242; 
    border-radius: 30px; 
    width: 20%; 
    cellspacing:0; 
    cellpadding:0; 
    font-family: helvetica, arial, sans-serif; 
    font-size: 12px; 
    letter-spacing: 0.2px; 
} 

td { 
    text-align: center; 
    display:block; 
} 

.table a { 
    padding: 8px; 
    color: white; 
    text-decoration: none; 
    display:block; 
} 
</style> 
<table class="table"> 
    <tr> 
     <td> 
      <a href="http://www.myurl.com" title="my site">MY SITE</a> 
     </td> 
    </tr> 
</table>

источник

2014-12-02 22:24:07 ACyclingMind

На этой ссылке вы можете попробовать манипулировать css (вверху справа), чтобы изменить цвета, текст и т. Д. – ACyclingMind

Спасибо за это! Вы звезда :) –

CSS заблокированы и принадлежат нашему веб-провайдеру, который обвиняет смешные ужасные наблюдаемые сумасшедшие суммы денег, чтобы вносить в него какие-либо изменения. –

Целая кнопка Clickable

ответ

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