HTML button link - How to create a button style in HTML
HTML Tutorial » HTML button link - How to create a button style link in HTML
<button> tag is used to create buttons by clicking on the web page.
The difference between these items and buttons created with <input> tag is that you can place the content (images or text) inside the <button>.
Inside a <button> element you can put text (and tags like <i>, <b>, <strong>, <br>, <img>, etc.).
That is not possible with a button created with the <input> element!
Syntax:
How to create default button
<!DOCTYPE html>
<html>
<head>
<title>default button - example</title>
<style>
.button {
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}.button1 {background-color: #4CAF50;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
</style><h2>Type of buttons</h2>
</head>
<body>
<h1>How to create default button - example</h1>
<p>Here is the default button</p>
<button> text_here </button>
<button class="button button1">Green</button>
<button class="button button2">Blue</button>
</body>
</html>
How to create a button style link adding onclick in HTML
This page shows how to make HTML button links and styling them using CSS into different colors.
<!DOCTYPE html>
<html>
<head>
<title>How to create a button style link in HTML - example</title>
<style>
.button {
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {background-color: #4CAF50;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
</style>
</head>
<body>
<h1>How to create a button style link in HTML </h1>
<p> How to create a button style link adding onclick in HTML </p>
<button class="button button1" onclick="window.location.href='https://www.agernic.com';">
Online Tutorial link_button
</button>
<button class="button button2">Informatii</button>
</body>
</html>
Related subjects:
HTML Button onclick
Button Action
Button Link
Button onclick event to <input> tag:
Example of adding an onclick event to the <input> tag:
<!DOCTYPE html>
<html>
<head>
<title>Example of adding an onclick event to the <input> tag:</title>
</head>
<body>
<h1>Example of adding an onclick event to the <input> tag: </h1>
<form>
<input type="button" onclick="window.location.href='https://www.agernic.com';" value="Online Tutorial" />
</form>
</body>
</html>
Creating a button acting like a link with the formaction attribute
Example of creating a button acting like a link with the formaction attribute:
<!DOCTYPE html>
<html>
<head>
<title>Example of creating a button acting like a link with the formaction attribute:</title>
</head>
<body>
<h1>Example of creating a button acting like a link with the formaction attribute: </h1>
<form>
<button type="submit" formaction="https://www.agernic.com">Click_me Online Tutorial</button>
</form>
</body>
</html>
HTML button link, HTML button style, HTML button onclick, link, type, disabled, href, tag, style, color, element, onclick
HTML button link - How to create a button style in HTML - html tutorial
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.