Html button onclick css

How to Make Button onclick in HTML

The onclick attribute is an event attribute that is supported by all browsers. It appears when the user clicks on a button element. If you want to make a button onclick, you need to add the onclick event attribute to the element.

How to add URL to the window object

The button onclick runs a script when the user clicks a button. Let’s see an example where we have a button, clicking on which you’ll go to our website. To achieve this, we’ll just add the URL of the website to the window object.

Example of adding URL to the window object:

html> html> head> title>Title of the document title> head> body> button onclick="window.location.href='https://w3docs.com';">Click Here button> body> html>

You can also use a button onclick in order to know the current date just by adding «getElementById(‘demo’).innerHTML=Date()» to the onclick event.

Example of using a button onclick to know the current date:

html> html> head> title>Title of the document title> head> body> p>Click the button to see the current date. p> button onclick="getElementById('demo').innerHTML=Date()">What day is today? button> p id="demo"> p> body> html>

The onclick event is used to call a function when an element is clicked. That is why it is mostly used with the JavaScript function. Let’s consider an example where you need to click the button to set a function that will output a message in a element with id=»demo».

Example of adding an onclick event:

html> html> head> title>Title of the document title> head> body> p>There is a hidden message for you. Click to see it. p> button onclick="myFunction()">Click me! button> p id="demo"> p> script> function myFunction( ) < document.getElementById("demo").innerHTML = "Hello Dear Visitor!
 We are happy that you've chosen our website to learn programming languages. We're sure you'll become one of the best programmers in your country. Good luck to you!"; > script> body> html>

Источник

How to Add an Onclick Effect with HTML and CSS

The most common way of creating a click event with CSS is using the checkbox hack. This method has broad browser support. You need to add a for attribute to the element and an id attribute to the element.

Example of adding an onclick event by using the checkbox hack:

html> html> head> style> label < display: block; background: #dbdbd9; width: 80px; height: 80px; > #box:checked + label < background: #fffc47; color: #666666; > style> head> body> form action="/form/submit" method="post"> input type="checkbox" id="box" /> label for="box">Click here label> form> body> html>

Result

In the example above, we applied the same value both to the id attribute of the tag and for attribute of the tag. The label onclick is restyled with the :checked pseudo-class.

Example of adding an onclick event for resizing the image:

html> html> head> style> #btnControl < display: none; > #btnControl:checked + label > img < width: 150px; height: 170px; > style> head> body> input type="checkbox" id="btnControl" /> label class="btn" for="btnControl"> img src="https://images.unsplash.com/photo-1565520651265-1148c3b277f4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" id="btnLeft" /> label> body> html>

Since a element can be associated only with one form control, you cannot just place a button inside the tag. But you can add some CSS to change the appearance and behavior of the button.

Example of adding an onclick effect on the tag:

html> html> head> style> #btnControl < display: none; > .btn < width: 80px; height: 30px; background: #ffffff; border-radius: 7px; padding: 1px 3px; box-shadow: 1px 1px 1px #000000; display: block; text-align: center; background-image: linear-gradient(to bottom, #e8e8e8, #a1a1a1); font-family: arial; font-size: 14px; line-height: 30px; > .btn:hover < background-image: linear-gradient(to bottom, #97e8ae, #3be36b); > .btn:active < margin-left: 1px 1px 0; box-shadow: -1px -1px 1px #000; outline: 1px solid #000000; -moz-outline-radius: 7px; background-image: linear-gradient(to top, #97e8ae, #3be36b); > #btnControl:checked + label < width: 70px; height: 74px; line-height: 74px; > style> head> body> input type="checkbox" id="btnControl" /> label class="btn" for="btnControl">Click here label> body> html>

Источник

HTML onclick Attribute

The onclick attribute fires on a mouse click on the element.

Applies to

The onclick attribute is part of the Event Attributes, and can be used on any HTML elements.

Elements	Event
All HTML elements	onclick

Examples

Button Example

Execute a JavaScript when a button is clicked:

P Example

Click on a

element to change its text color to red:

Click me to change my text color.

Browser Support

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

HTML onclick Event Attribute

The onclick attribute fires on a mouse click on the element.

Browser Support

Syntax

Attribute Values

Technical Details

More Examples

Example

Click on a

element to change its text color to red:

Click me to change my text color.

Example

Click on a button to copy some text from an input field to another input field:

Related Pages

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник