How to make a DIV section clickable?


Tags: php,javascript,css,html

Problem :

I have written a web page in which links are all contained within their own tags. I've also made them all button styles with CSS (border, background color, padding). How do I enable the whole DIV to be clicked to activate the link?



Solution :

The best way to do this kind of effect (making links act like buttons) is to apply css to the links themselves. Here's a basic example:

a.mylink {
display: block;
padding: 10px;
width: 200px;
background-color: #000;
color: #fff;
}

Test it out - the whole of the button is clickable. And it respects the browser's normal link actions like right-clicking, status url information, etc.


    CSS Howto..

    How to remove strange border from css-animated clip-path?

    How to underline button text (using CSS) when mouse pointer is over the button?

    How with JQuery cause Hover on diffrent element than mouse is currently on top of

    How to wrap between letter and punctuation to avoid extra blank space in the end of line?

    How to completely change the css position of an element on the page to appear in another part of the document flow?

    How to exclude a CSS formatting? [duplicate]

    How to keep control-specific css with the control code (ASP.NET)

    How to use bootstrap-theme.css with bootstrap 3?

    How to gracefully override the old css with a new css by jQuery?

    How to design a CSS for floating confirm dialog centered on the visible portion of a page?

    CSS How to align checkbox image

    How to play a second CSS animation once the first one finishes

    How to get border radius and gradient background working together in IE 9

    How do I center a table?

    how do I use standard GWT CSS style themes from non-GWT pages?

    How to vertically align text to the right of some text using css? [closed]

    How to tell Modernizr load (yepnope) to add CSS at bottom of head?

    Fonts wont change and id height wont show

    How to interchange table cells using Pure CSS

    How to apply custom css to android Webview when URL is from internet server?

    How to contol a CSS property with Javascript

    ng-bind-html adds owns css class 'ng-binding' which brokes all nested css, how get rid of it?

    PHP foreach, CSS and jQuery script.. How to interact?

    How to make a horizontal expandable menu fluid

    how to edit a css selector in order to shorten the amount of characters used in file

    How to add table highlighting in PHP?

    How to override css img properties?

    How to prevent input elements from affecting a table's columns' widths?

    How to prevent fixed positioned element overlapping others elements in css?

    How to base the height of a

    on whether or not its parent div has an image