button htm code example
Example 1: html button
<html>
<head>
<style>
.button {
background-color: <background color>;
border: none;
color: <text color>;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 4px;
cursor: pointer;
border-radius: 8px;
}
</style>
</head>
<body>
<a href="<url>" class="button">ButtonText</a>
</body>
</html>
Example 2: html button
<!-- Normal HTML with javascript -->
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Buttons</title>
</head>
<body>
<button onclick = "myfunction()">OK</button>
<script>
function myfunction() {
alert("This is a working button");
}
</script>
</body>
</html>
<!-- Normal HTML with jquery -->
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Buttons</title>
<!--scripts \/-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<button id="buttonAlert">OK</button>
<script>
$("#buttonAlert").click(
function(){
alert("This is a working button");
}
);
</script>
</body>
</html>
<!-- HTML with vue -->
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Buttons</title>
<!--scripts \/-->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<!--You need a palce to mount the app/widget-->
<!--Example 1 - there is no template-->
<div id="app">
<button v-on:click="activate">OK</button>
</div>
<!--mount to id APP-->
<!--You need a palce to mount the app/widget-->
<!--Example 2 - with template-->
<div id="app_2">
</div>
<!--mount to id APP-->
<script>
const app_1 = {
data() {
msg_1 = "Example 1"
},
methods: {
activate: function() {
alert(msg_1)
}
}
}
api_1 = Vue.createApp(app_1)
api_entry_1 = api_1.mount("#app")
console.log(api_entry_1)
const app_2 = {
data() {
msg = "Example 2"
},
methods: {
runb: function() {
alert(msg)
}
},
template: `
<button v-on:click="runb">Now</button>
`
}
api_2 = Vue.createApp(app_2)
api_entry_2 = api_2.mount("#app_2")
console.log(api_entry_2)
</script>
</body>
</html>