Showing posts with label Button. Show all posts
Showing posts with label Button. Show all posts

Monday 20 September 2021

Bootstrap Buttons

   , , , ,

Bootstrap Button's provides several predefined button styles, each serving its own purpose. The button classes can be used on <a>, <button>, or <input> elements. Differect custom button styles include btn, btn-primary, btn-secondary, btn-success, btn-danger, btn-warning, btn-info, btn-light, btn-dark, btn-link etc. To avoid text to wrap, use the .text-nowrap class to the bootstrap button. 

Code :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Button's - Button Styles</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

    <div class="container">
        <div class="card">
            <div class="card-header">
                <h2>Bootstrap Button's - Button Styles</h2>
            </div>
            <div class="card-body">
                <button type="button" class="btn">Basic</button>
                <button type="button" class="btn btn-primary">Primary</button>
                <button type="button" class="btn btn-secondary">Secondary</button>
                <button type="button" class="btn btn-dark">Dark</button>
                <button type="button" class="btn btn-success">Success</button>
                <button type="button" class="btn btn-info">Info</button>
                <button type="button" class="btn btn-warning">Warning</button>
                <button type="button" class="btn btn-danger">Danger</button>
                <button type="button" class="btn btn-light">Light</button>
                <button type="button" class="btn btn-link">Link</button>
            </div>
        </div>
    </div>

</body>
</html>

Output :


Bootstrap Button's

Bootstrap Outline Button's

Bootstrap provides outline/bordered buttons with an additional "hover" effect. Bootstrap Outline Button's use classes btn-outline-primary, btn-outline-secondary, btn-outline-success, btn-outline-danger, btn-outline-warning, btn-outline-info, btn-outline-light, btn-outline-dark etc.

Code :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Outline Button's - Button Styles</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    
    <div class="container">
        <div class="card">
            <div class="card-header">
                <h2>Bootstrap Outline Button's - Button Styles</h2>
            </div>
            <div class="card-body">
                <button type="button" class="btn btn-outline-primary">Primary</button>
                <button type="button" class="btn btn-outline-secondary">Secondary</button>
                <button type="button" class="btn btn-outline-dark">Dark</button>
                <button type="button" class="btn btn-outline-success">Success</button>
                <button type="button" class="btn btn-outline-info">Info</button>
                <button type="button" class="btn btn-outline-warning">Warning</button>
                <button type="button" class="btn btn-outline-light">Light</button>
                <button type="button" class="btn btn-outline-danger">Danger</button>
    
            </div>
        </div>
    </div>

</body>
</html>

Output :


Bootstrap Outline Button's

Bootstrap Button Tags

Bootstrap Button style classes can be used with <button> element, <a> element or <input> element. When using bootstrap button  classes with <a> element for triggering page functionality rather than linking to new page mension button tag role="button" to convey there message to screen readers.

Code :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Button's - Button Tag</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
   
    <div class="container">
        <div class="card">
            <div class="card-header">
                <h2>Bootstrap Button's - Button Tag</h2>
            </div>
            <div class="card-body">
                <a class="btn btn-info" href="#" role="button">Link</a>
                <button class="btn btn-info" type="submit">Button</button>
                <input class="btn btn-info" type="button" value="Input">
                <input class="btn btn-info" type="submit" value="Submit">
                <input class="btn btn-info" type="reset" value="Reset">

            </div>
        </div>
    </div>

</body>
</html>


Output :


Bootstrap Button's - Button Tag


Thursday 27 April 2017

Different types of Button controls in Asp.Net

   , , , ,
In this post, I will explain different types of button controls available in Asp.Net.

ASP.Net provides three types of button controls and these are used to post a page to the server. 
1.     Button
2.     LinkButton
3.     ImageButton

1.    Button
Button control displays a push-button control with text in a rectangular area. By default, a Button control is a Submit button. We can use Text property to change the text of Button. We can provide an event handler for the Click event to programmatically control the actions performed when the Submit button is clicked. 

Syntax of Button control -
<asp:Button ID="Button1" runat="server" Text="Button" />

2.   LinkButton
LinkButton displays a hyperlink-style button control. By default, a LinkButton control is a Submit button. We can use Text property to change the text of a LinkButton. We can provide a link to another page using PostbackUrl property. LinkButton can be used in the scenario where we need to add functionality with a hyperlink. 

Syntax of LinkButton control -
<asp:LinkButton runat="server" PostBackUrl="test.aspx"> LinkButton </asp:LinkButton>

3.   ImageButton
ImageButton displays a clickable image control. By default, ImageButton control is a submit button. We can use ImageUrl property to associate an image with ImageControl. ImageButton can be used in the scenario where we need to add functionality with an Image. 

Syntax of ImageButton control -
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="Image.gif" />