AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL

HTML button link - How to create a button style in HTML


<< Previous Page
HTML Table Style Border Width
Next Page >>
HTML link tag

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:

HTML button
<button>text</button>

 

How to create default button

Example
  <!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>


</head>

<body>
<h1>How to create default button - example</h1>
<p>Here is the default button</p>
<button> text_here </button>

<h2>Type of buttons</h2>
<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.

Example
<!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>
Note: In the above example I used internal CSS, avoid this and use external CSS instead.

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:

Example
<!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:

Example
<!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>

 

<< Previous Page
HTML Table Style Border Width
Next Page >>
HTML link tag

 



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

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


HTML Img Background
HTML Image Link
HTML Image Size
HTML Text Style
HTML Text Align
HTML Text Size
HTML Text Color Style
HTML Text Color
HTML Table Color
HTML Table Row Colspan
HTML Table Width
HTML Table Style
HTML Table Border
HTML Table
HTML Font Face
HTML Font Size
HTML Font Color
HTML Headings
HTML div border color
HTML div class
HTML class container
HTML form action
HTML comment
HTML link new tab
HTML link underline
HTML link tag
HTML button action
HTML button onclick
HTML button link
HTML table style
HTML image
HTML colors
HTML div style
Text, paragraf in HTML
HTML Tags Attributes
HTML - Elements
HTML Introduction
Home HTML Tutorial
Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


Upload Image, display, edit and delete i...
Login Form with Image background...
How to Create an Image with Transparent ...
Portfolio Gallery Website with filtering...
Simple pagination script PHP MySQLi...
Center Image in div...
Image Hover Overlay Fade...
Sticky image / element / div on scroll...
Responsive images...
Create rounded image in HTML CSS...
Add border around image...
Position Text Over an Image HTML CSS res...
Create a Slideshow Images Gallery...
Create a Sticky Sidebar...
Search bar using CSS HTML...
Shrink Navigation Menu on Scroll...
How to Create Accordion HTML Templates...
Dropdown menu in the navigation bar...
Responsive Top Navigation Bar with mobil...
Split horizontal navigation bar...