Изборник Затворити

Кликабилно ХТМЛ дугме без дугмета (HTML+CSS)

Желите да на страни направите поља која личе на дугмад а када корисник кликне на поље да се отвори нова страна као да је кликнут линк, али вам не успева? Само садржај поља је линк али не и цело поље? Ево како се то у ствари ради:

ХТМЛ код треба да изгледа овако:
<div class="dugme">
<a href="http://nekilink.com">
<span class="pravo_dugme">
Неки текст
</span>
</a>
</div>

<div> садржи дугме али није део дугмета. Дугме у ствари чини <span> и сав његов садржај који се налазе у оквиру <а> линка. Врло је важно да се овде употреби <span> јер <div> неће радити посао.

Међутим овај ХТМЛ и даље не ради како треба, још увек је само текстуални садржај линк а остали (празан) простор у дугмету се не може кликунути. Потребно је и мало ЦСС-а:

.dugme {
width:100px;
height:100px;
}

.pravo_dugme {
display: inline-block;
width:100%;
height:100%;
}

Тек сада поље цело постаје кликабилно.

2 Comments

Оставите одговор

Ваша адреса е-поште неће бити објављена. Неопходна поља су означена *

Попуните израз тако да буде тачан: *

Ово веб место користи Акисмет како би смањило непожељне. Сазнајте како се ваши коментари обрађују.