posted on 10 years ago
— updated on 1 second ago
24
Want to make your HTML website more attractive? What about adding buttons to your website? Cool isn't it? Here are the steps by which you can insert buttons in an HTML website.
Steps
Do a simple HTML coding. Once, you are through with the process, you can use it in your website.
For now, keep your coding simple. Include tags like
, <head> and <body></p><p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn.kapitoshka.info/news/f7/5f/14/f75f14ad8185fd035da07b72bb935ca4-entry-1.jpg" width="718" height="477" /></p><p>Add <a href> tag under the <body> tag. <a href> tag is used to insert hyperlinks.
Under the <a href> tag and add your desired URL, say "https://www.wikihow.com/". The syntax of <a> tag is: <a href = "URL">Your text / button here"</a></p><p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn.kapitoshka.info/news/77/a3/e9/77a3e9e7f89bec33800306509376b884-entry-2.jpg" width="718" height="477" /></p><p>Under <a> tag, add <button> tag. This tag is used to add buttons in an HTML document.
Add the desired text you want to display under the <button> tag. The syntax for the button tag is: "<button>Your Text Here</button>."</p><p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn.kapitoshka.info/news/b3/7c/7c/b37c7c1b5995609888cc2637f5b29a7d-entry-3.jpg" width="718" height="477" /></p><p>Close the button tag and complete the coding by adding tags i.e. </a></body></html></p><p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn.kapitoshka.info/news/5c/13/98/5c139888b1140c2f636679782221a81c-entry-4.jpg" width="718" height="477" /></p><p>Save the text file as an HTML document. You can do so by going to Save as option on you text editor and adding the .html extension to the file name.</p><p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://cdn.kapitoshka.info/news/b4/1f/b6/b41fb67829222a5c14a5cd0f00fe7189-entry-5.jpg" width="718" height="477" /></p><p>Finished! Enjoy Curiosity.</p>
<div class="clear"></div>
</section>
</div>
<div class="content-tags hide-mobiles">
</div>
<div class="buzz-author-box center-items clearfix">
<div class="buzz-author-image">
<a href="https://kapitoshka.info/profile/maxiluc">
<img src="https://cdn.kapitoshka.info/avatars/c2/04/c0/c204c024ee4b71a586e82ec72c6e08a6-b.jpg" class="avatar" width="90" height="90"
alt="MaxiLuc">
</a>
</div>
<div class="buzz-author-info">
<div class="buzz-author-box-name">
<h3 class="buzz-author-name fn">
<a href="https://kapitoshka.info/profile/maxiluc">
MaxiLuc
</a>
</h3>
<div class="buzz-author-actions">
<div class="following_area128">
<a class="button button-white button-small" href="https://kapitoshka.info/login" rel="get:Loginform">
<i class="fa fa-user-times"></i> Follow
</a>
</div>
</div>
</div>
<div class="buzz-author-description">
</div>
<div class="buzz-author-social">
<div class="social_links only_icons">
</div>
</div>
</div>
</div>
<section class="user-reactions" id="reactions80492">
<div class="colheader sea">
<h3 class="header-title">What's your reaction?</h3>
</div>
<div class="clear"></div>
<div class="percentage-bar">
<div class="reaction-emoji">
<div class="bar">
<span class="reaction-percent-bar count f" data-percent="0">
<span class="count-text">0</span>
</span>
</div>
<a class="postable" rel="nofollow" href="javascript:void();" data-method="Post" data-target="reactions80492" data-href="https://kapitoshka.info/reactions/awesome/80492">
<img alt="AWESOME!" src="https://kapitoshka.info/assets/images/reactions/awesome.gif" width="50" height="50">
<span class="text">AWESOME!</span>
</a>
</div>
<div class="reaction-emoji">
<div class="bar">
<span class="reaction-percent-bar count f" data-percent="0">
<span class="count-text">0</span>
</span>
</div>
<a class="postable" rel="nofollow" href="javascript:void();" data-method="Post" data-target="reactions80492" data-href="https://kapitoshka.info/reactions/nice/80492">
<img alt="NICE" src="https://kapitoshka.info/assets/images/reactions/nice.png" width="50" height="50">
<span class="text">NICE</span>
</a>
</div>
<div class="reaction-emoji">
<div class="bar">
<span class="reaction-percent-bar count f" data-percent="0">
<span class="count-text">0</span>
</span>
</div>
<a class="postable" rel="nofollow" href="javascript:void();" data-method="Post" data-target="reactions80492" data-href="https://kapitoshka.info/reactions/loved/80492">
<img alt="LOVED" src="https://kapitoshka.info/assets/images/reactions/loved.gif" width="50" height="50">
<span class="text">LOVED</span>
</a>
</div>
<div class="reaction-emoji">
<div class="bar">
<span class="reaction-percent-bar count f" data-percent="0">
<span class="count-text">0</span>
</span>
</div>
<a class="postable" rel="nofollow" href="javascript:void();" data-method="Post" data-target="reactions80492" data-href="https://kapitoshka.info/reactions/loL/80492">
<img alt="LOL" src="https://kapitoshka.info/assets/images/reactions/lol.gif" width="50" height="50">
<span class="text">LOL</span>
</a>
</div>
<div class="reaction-emoji">
<div class="bar">
<span class="reaction-percent-bar count f" data-percent="0">
<span class="count-text">0</span>
</span>
</div>
<a class="postable" rel="nofollow" href="javascript:void();" data-method="Post" data-target="reactions80492" data-href="https://kapitoshka.info/reactions/funny/80492">
<img alt="FUNNY" src="https://kapitoshka.info/assets/images/reactions/funny.gif" width="50" height="50">
<span class="text">FUNNY</span>
</a>
</div>
<div class="reaction-emoji">
<div class="bar">
<span class="reaction-percent-bar count f" data-percent="0">
<span class="count-text">0</span>
</span>
</div>
<a class="postable" rel="nofollow" href="javascript:void();" data-method="Post" data-target="reactions80492" data-href="https://kapitoshka.info/reactions/fail/80492">
<img alt="FAIL!" src="https://kapitoshka.info/assets/images/reactions/fail.gif" width="50" height="50">
<span class="text">FAIL!</span>
</a>
</div>
<div class="reaction-emoji">
<div class="bar">
<span class="reaction-percent-bar count f" data-percent="0">
<span class="count-text">0</span>
</span>
</div>
<a class="postable" rel="nofollow" href="javascript:void();" data-method="Post" data-target="reactions80492" data-href="https://kapitoshka.info/reactions/omg/80492">
<img alt="OMG!" src="https://kapitoshka.info/assets/images/reactions/wow.gif" width="50" height="50">
<span class="text">OMG!</span>
</a>
</div>
<div class="reaction-emoji">
<div class="bar">
<span class="reaction-percent-bar count f" data-percent="0">
<span class="count-text">0</span>
</span>
</div>
<a class="postable" rel="nofollow" href="javascript:void();" data-method="Post" data-target="reactions80492" data-href="https://kapitoshka.info/reactions/ew/80492">
<img alt="EW!" src="https://kapitoshka.info/assets/images/reactions/cry.gif" width="50" height="50">
<span class="text">EW!</span>
</a>
</div>
</div>
</section>
<div class="content-comments">
<div id="comments-wrapper">
<div class="colheader sea">
<h3 class="header-title">Comments</h3>
</div>
<!-- add comment -->
<div id="addComment" class="add-comment">
<form action="#" method="post" data-prepend="yes"
onsubmit="return false;" onSubmit="return false;">
<div class="loader-ajax"></div>
<div class="add-comment-container">
<img src="https://kapitoshka.info/assets/images/user-avatar-s.jpg" alt="https://kapitoshka.info/assets/images/user-avatar-s.jpg" class="usericont" />
<div class="add-comment-form">
<div>
<textarea data-href="https://kapitoshka.info/login" rel="get:Loginform" name="comment_text" cols="30" rows="10"
placeholder="You must have to login to post a comment."></textarea>
<div class="add-comment-form-actions">
<button type="submit" class="add_new_comment">
<div class="add-comment-loading"><img src="https://kapitoshka.info/assets/images/ajax-loader.gif"></div>
<span>Comment</span>
</button>
<div class="add-comment-action-inputs">
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<!-- comments -->
<div id="comments">
<div class="comment-heading allcomments">
<h3 class="header-title">
<span>0 comment</span>
</h3>
<div class="comment-short comment_sort">
<a href="javascript:void(0);" data-sort="best">Best</a>
<a href="javascript:void(0);" data-sort="old">Oldest</a>
<a href="javascript:void(0);" class="active" data-sort="new">Newest</a>
</div>
</div>
<div class="comments">
<div class="form-loader"></div>
<div id="comments_list">
<div class="no-comment">Write the first comment for this!</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</article>
</div>
<div class="content-spinner">
<svg class="spinner-container" width="45px" height="45px" viewBox="0 0 52 52">
<circle class="path" cx="26px" cy="26px" r="20px" fill="none" stroke-width="4px"></circle>
</svg>
</div>
</div>
<div class="sidebar hide-mobile">
<div class="sidebar--fixed">
<div class="sidebar-block clearfix">
<div class="colheader rosy">
<h3 class="header-title">Today's Top <span>Posts</span></h3>
</div>
<br>
<ol class="sidebar-mosts sidebar-mosts--readed">
<li class="sidebar-mosts__item ">
<a class="sidebar-mosts__item__link" href="https://kapitoshka.info/world/trump-vows-iron-dome-for-america-slams-bidens-foreign-policy-at-historic-republican-meet-watch-84849" title="Trump Vows 'Iron Dome' For America, Slams Biden's Foreign Policy At Historic Republican Meet | WATCH">
<figure class="sidebar-mosts__item__body">
<div class="sidebar-mosts__item__image">
<img class="sidebar-mosts__item__image__item lazyload"
src="https://kapitoshka.info/assets/images/preloader.gif"
data-src="https://cdn.kapitoshka.info/news/20/09/47/2009473797613b10c3c4d3567bd5edc5-s.jpg" alt="Trump Vows 'Iron Dome' For America, Slams Biden's Foreign Policy At Historic Republican Meet | WATCH"
width="300" height="169">
</div>
<figcaption class="sidebar-mosts__item__caption">
<div class="sidebar-mosts__item__view">
<span
class="sidebar-mosts__item__view__count">6</span>
<span class="sidebar-mosts__item__view__icon"><i
class="material-icons"></i></span>
</div>
<h3 class="sidebar-mosts__item__title">Trump Vows 'Iron Dome' For America, Slams Biden's Foreign Policy At Historic Republican Meet | WATCH</h3>
</figcaption>
</figure>
</a>
</li>
<li class="sidebar-mosts__item ">
<a class="sidebar-mosts__item__link" href="https://kapitoshka.info/india/sanskari-jawans-crpf-to-soon-set-up-sanskarshalas-to-boost-juniorsenior-bonding-curb-suicides-in-force-66498" title="Sanskari Jawans: CRPF to Soon Set Up Sanskarshalas to Boost Junior-Senior Bonding, Curb Suicides in Force">
<figure class="sidebar-mosts__item__body">
<div class="sidebar-mosts__item__image">
<img class="sidebar-mosts__item__image__item lazyload"
src="https://kapitoshka.info/assets/images/preloader.gif"
data-src="https://cdn.kapitoshka.info/news/5b/83/20/5b8320efa8739e6f9edece85fc0e7bb5-s.jpg" alt="Sanskari Jawans: CRPF to Soon Set Up Sanskarshalas to Boost Junior-Senior Bonding, Curb Suicides in Force"
width="300" height="169">
</div>
<figcaption class="sidebar-mosts__item__caption">
<div class="sidebar-mosts__item__view">
<span
class="sidebar-mosts__item__view__count">6</span>
<span class="sidebar-mosts__item__view__icon"><i
class="material-icons"></i></span>
</div>
<h3 class="sidebar-mosts__item__title">Sanskari Jawans: CRPF to Soon Set Up Sanskarshalas to Boost Junior-Senior Bonding, Curb Suicides in Force</h3>
</figcaption>
</figure>
</a>
</li>
<li class="sidebar-mosts__item ">
<a class="sidebar-mosts__item__link" href="https://kapitoshka.info/how-to/how-to-follow-someone-on-roblox-and-join-their-games-87482" title="How to Follow Someone on Roblox and Join Their Games">
<figure class="sidebar-mosts__item__body">
<div class="sidebar-mosts__item__image">
<img class="sidebar-mosts__item__image__item lazyload"
src="https://kapitoshka.info/assets/images/preloader.gif"
data-src="https://cdn.kapitoshka.info/load/09657662f3d7bf686e41f6c0ff960b37-s.jpg" alt="How to Follow Someone on Roblox and Join Their Games"
width="300" height="169">
</div>
<figcaption class="sidebar-mosts__item__caption">
<div class="sidebar-mosts__item__view">
<span
class="sidebar-mosts__item__view__count">5</span>
<span class="sidebar-mosts__item__view__icon"><i
class="material-icons"></i></span>
</div>
<h3 class="sidebar-mosts__item__title">How to Follow Someone on Roblox and Join Their Games</h3>
</figcaption>
</figure>
</a>
</li>
<li class="sidebar-mosts__item ">
<a class="sidebar-mosts__item__link" href="https://kapitoshka.info/how-to/how-to-remove-watermarks-on-capcut-complete-guide-87481" title="How to Remove Watermarks on CapCut: Complete Guide">
<figure class="sidebar-mosts__item__body">
<div class="sidebar-mosts__item__image">
<img class="sidebar-mosts__item__image__item lazyload"
src="https://kapitoshka.info/assets/images/preloader.gif"
data-src="https://cdn.kapitoshka.info/load/09657662f3d7bf686e41f6c0ff960b37-s.jpg" alt="How to Remove Watermarks on CapCut: Complete Guide"
width="300" height="169">
</div>
<figcaption class="sidebar-mosts__item__caption">
<div class="sidebar-mosts__item__view">
<span
class="sidebar-mosts__item__view__count">5</span>
<span class="sidebar-mosts__item__view__icon"><i
class="material-icons"></i></span>
</div>
<h3 class="sidebar-mosts__item__title">How to Remove Watermarks on CapCut: Complete Guide</h3>
</figcaption>
</figure>
</a>
</li>
<li class="sidebar-mosts__item ">
<a class="sidebar-mosts__item__link" href="https://kapitoshka.info/new-delhi/shaping-the-sengol-proud-yet-unbelievable-moment-wont-make-replicas-for-sale-crafters-kin-tell-news18-65913" title="Shaping The Sengol: Proud Yet Unbelievable Moment, Won't Make Replicas for Sale, Crafter's Kin Tell News18">
<figure class="sidebar-mosts__item__body">
<div class="sidebar-mosts__item__image">
<img class="sidebar-mosts__item__image__item lazyload"
src="https://kapitoshka.info/assets/images/preloader.gif"
data-src="https://cdn.kapitoshka.info/news/77/c3/6f/77c36f20d9a03f8b5c668d8448e79c9d-s.jpg" alt="Shaping The Sengol: Proud Yet Unbelievable Moment, Won't Make Replicas for Sale, Crafter's Kin Tell News18"
width="300" height="169">
</div>
<figcaption class="sidebar-mosts__item__caption">
<div class="sidebar-mosts__item__view">
<span
class="sidebar-mosts__item__view__count">5</span>
<span class="sidebar-mosts__item__view__icon"><i
class="material-icons"></i></span>
</div>
<h3 class="sidebar-mosts__item__title">Shaping The Sengol: Proud Yet Unbelievable Moment, Won't Make Replicas for Sale, Crafter's Kin Tell News18</h3>
</figcaption>
</figure>
</a>
</li>
<li class="sidebar-mosts__item ">
<a class="sidebar-mosts__item__link" href="https://kapitoshka.info/how-to/how-to-pray-the-rosary-in-spanish-a-complete-guide-79933" title="How to Pray the Rosary in Spanish: A Complete Guide">
<figure class="sidebar-mosts__item__body">
<div class="sidebar-mosts__item__image">
<img class="sidebar-mosts__item__image__item lazyload"
src="https://kapitoshka.info/assets/images/preloader.gif"
data-src="https://cdn.kapitoshka.info/news/c8/f4/24/c8f42444b615b8f2ec0d37cd12e488ca-s.jpg" alt="How to Pray the Rosary in Spanish: A Complete Guide"
width="300" height="169">
</div>
<figcaption class="sidebar-mosts__item__caption">
<div class="sidebar-mosts__item__view">
<span
class="sidebar-mosts__item__view__count">5</span>
<span class="sidebar-mosts__item__view__icon"><i
class="material-icons"></i></span>
</div>
<h3 class="sidebar-mosts__item__title">How to Pray the Rosary in Spanish: A Complete Guide</h3>
</figcaption>
</figure>
</a>
</li>
<li class="sidebar-mosts__item ">
<a class="sidebar-mosts__item__link" href="https://kapitoshka.info/movies/priyanka-chopra-jonas-feels-beyond-honoured-to-present-2020-global-citizen-prize-to-warren-buffet-56991" title="Priyanka Chopra Jonas Feels 'Beyond Honoured' to Present 2020 Global Citizen Prize to Warren Buffet">
<figure class="sidebar-mosts__item__body">
<div class="sidebar-mosts__item__image">
<img class="sidebar-mosts__item__image__item lazyload"
src="https://kapitoshka.info/assets/images/preloader.gif"
data-src="https://cdn.kapitoshka.info/news/53/72/de/5372de765086cd7a27b15b9873a99f58-s.jpg" alt="Priyanka Chopra Jonas Feels 'Beyond Honoured' to Present 2020 Global Citizen Prize to Warren Buffet"
width="300" height="169">
</div>
<figcaption class="sidebar-mosts__item__caption">
<div class="sidebar-mosts__item__view">
<span
class="sidebar-mosts__item__view__count">5</span>
<span class="sidebar-mosts__item__view__icon"><i
class="material-icons"></i></span>
</div>
<h3 class="sidebar-mosts__item__title">Priyanka Chopra Jonas Feels 'Beyond Honoured' to Present 2020 Global Citizen Prize to Warren Buffet</h3>
</figcaption>
</figure>
</a>
</li>
<li class="sidebar-mosts__item ">
<a class="sidebar-mosts__item__link" href="https://kapitoshka.info/india/12-kg-elephant-tusks-tiger-teeth-worth-rs-114-crore-seized-47353" title="12 Kg Elephant Tusks, Tiger Teeth Worth Rs 1.14 Crore Seized">
<figure class="sidebar-mosts__item__body">
<div class="sidebar-mosts__item__image">
<img class="sidebar-mosts__item__image__item lazyload"
src="https://kapitoshka.info/assets/images/preloader.gif"
data-src="https://cdn.kapitoshka.info/load/09657662f3d7bf686e41f6c0ff960b37-s.jpg" alt="12 Kg Elephant Tusks, Tiger Teeth Worth Rs 1.14 Crore Seized"
width="300" height="169">
</div>
<figcaption class="sidebar-mosts__item__caption">
<div class="sidebar-mosts__item__view">
<span
class="sidebar-mosts__item__view__count">5</span>
<span class="sidebar-mosts__item__view__icon"><i
class="material-icons"></i></span>
</div>
<h3 class="sidebar-mosts__item__title">12 Kg Elephant Tusks, Tiger Teeth Worth Rs 1.14 Crore Seized</h3>
</figcaption>
</figure>
</a>
</li>
<li class="sidebar-mosts__item ">
<a class="sidebar-mosts__item__link" href="https://kapitoshka.info/india/yahoo-ceo-outlines-new-corporate-structure-23738" title="Yahoo CEO outlines new corporate structure">
<figure class="sidebar-mosts__item__body">
<div class="sidebar-mosts__item__image">
<img class="sidebar-mosts__item__image__item lazyload"
src="https://kapitoshka.info/assets/images/preloader.gif"
data-src="https://cdn.kapitoshka.info/news/8e/8e/af/8e8eaf399546a1be3a59b316ab9f33a0-s.jpg" alt="Yahoo CEO outlines new corporate structure"
width="300" height="169">
</div>
<figcaption class="sidebar-mosts__item__caption">
<div class="sidebar-mosts__item__view">
<span
class="sidebar-mosts__item__view__count">5</span>
<span class="sidebar-mosts__item__view__icon"><i
class="material-icons"></i></span>
</div>
<h3 class="sidebar-mosts__item__title">Yahoo CEO outlines new corporate structure</h3>
</figcaption>
</figure>
</a>
</li>
<li class="sidebar-mosts__item ">
<a class="sidebar-mosts__item__link" href="https://kapitoshka.info/how-to/300-funny-kind-rave-kandi-ideas-87484" title="300+ Funny & Kind Rave Kandi Ideas">
<figure class="sidebar-mosts__item__body">
<div class="sidebar-mosts__item__image">
<img class="sidebar-mosts__item__image__item lazyload"
src="https://kapitoshka.info/assets/images/preloader.gif"
data-src="https://cdn.kapitoshka.info/load/09657662f3d7bf686e41f6c0ff960b37-s.jpg" alt="300+ Funny & Kind Rave Kandi Ideas"
width="300" height="169">
</div>
<figcaption class="sidebar-mosts__item__caption">
<div class="sidebar-mosts__item__view">
<span
class="sidebar-mosts__item__view__count">3</span>
<span class="sidebar-mosts__item__view__icon"><i
class="material-icons"></i></span>
</div>
<h3 class="sidebar-mosts__item__title">300+ Funny & Kind Rave Kandi Ideas</h3>
</figcaption>
</figure>
</a>
</li>
</ol>
</div>
<div class="sidebar-block clearfix">
<div class="colheader sea">
<h3 class="header-title">Connect With Community</h3>
</div>
<div class="social_links">
<a href="/index.xml" class="social-rss" target="_blank" rel="nofollow">
<img width="24px" height="24px" src="https://kapitoshka.info/assets/images/social_icons/rss.svg" alt="Subscribe to our RSS" />
<span>Subscribe to our RSS</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<span class="back-to-top hide-mobile"><i class="material-icons"></i></span>
<div class="clear"></div>
<footer class="footer-bottom category-dropdown_sec sec_cat3 clearfix clearfix">
<div class="container">
<img class="footer-site-logo" src="https://kapitoshka.info/upload/flogo.png" width="60px" alt="">
<div class="footer-left">
<div class="footer-menu clearfix">
<ul class="level_root ">
</ul>
</div>
<div class="footer-copyright clearfix">
Copyright © 2024 Kapitoshka. All rights reserved.
</div>
</div>
</div>
</footer>
<script>
var buzzy_base_url ="https://kapitoshka.info";
var buzzy_language ="en_US";
var buzzy_facebook_app ="";
</script>
<script src="https://kapitoshka.info/assets/js/manifest.js?v=4.9.1"></script>
<script src="https://kapitoshka.info/assets/js/vendor.js?v=4.9.1"></script>
<script src="https://kapitoshka.info/assets/js/app.min.js?v=4.9.1"></script>
<div id="auth-modal" class="modal auth-modal"></div>
<div id="fb-root"></div>
<div class="hide">
<input name="_requesttoken" id="requesttoken" type="hidden" value="meVUPbOzdg4VlT7M2wUXmOIpyftxChzqTYSGwv9x" />
</div>
<script>
var CommentsVar = {
ajax: "https://kapitoshka.info/api/comments",
requestData: {
_token: "meVUPbOzdg4VlT7M2wUXmOIpyftxChzqTYSGwv9x",
post_id: "80492",
},
lang: {
Success: "Success",
Error: "Error",
Ok: "OK",
Cancel: "Cancel",
Edit: "Edit",
EditComment: "Edit Comment",
Report: "Report",
ReportComment: "Report Comment",
ReportPlaceholder: "Tell us why you are reporting this comment",
WriteSomething: "You need to write something!",
},
settings: {
useUserTags: "1",
}
};
</script>
<script src="https://kapitoshka.info/assets/js/comments.js?v=4.9.1"></script>
<script>
if($(".news").length) {
$(".news").buzzAutoLoad({
item: ".news__item"
});
}
</script>
<script type="text/javascript" defer src="https://cdn.jsdelivr.net/npm/livcounter/counter.js"></script>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<script async defer src="//platform.instagram.com/en_US/embeds.js"></script>
</body>
</html>
