button tag with a tag
<a href='https://www.freecodecamp.org/'><button>Link To freeCodeCamp</button></a>button tag with a tag
<a href='https://www.freecodecamp.org/'><button>Link To freeCodeCamp</button></a>html button
<form action="https://google.com">
<input type="submit" value="Go to Google" />
</form>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>html button size
transform: scale(4); /* This will make the component 4 times bigger */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>Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
