Bootstrap Button style

Style button with meaningful color

The following html uses the available button classes to quickly create a styled button.


<!DOCTYPE HTML>
<html> 
<head> 
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
</head><!--from  ww  w. j av a  2s. com-->
<body style='margin:20px;'>

    <!-- Standard gray button with gradient -->
    <button type="button" class="btn btn-default">Default</button>
    
    <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
    <button type="button" class="btn btn-primary">Primary</button>
    
    <!-- Indicates a successful or positive action -->
    <button type="button" class="btn btn-success">Success</button>
    
    <!-- Contextual button for informational alert messages -->
    <button type="button" class="btn btn-info">Info</button>
    
    <!-- Indicates caution should be taken with this action -->
    <button type="button" class="btn btn-warning">Warning</button>
    
    <!-- Indicates a dangerous or potentially negative action -->
    <button type="button" class="btn btn-danger">Danger</button>
    
    <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
    <button type="button" class="btn btn-link">Link</button>

        
</body>
</html>

Click to view the demo

Create button out of anchor and input tags

Other than button tag we can use the button classes on an <a>, <button>, or <input> element.


<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
</head><!--  ww w . ja  v a 2s  .  co  m-->
<body style='margin: 20px;'>

  <a class="btn btn-default" href="#">Link</a>
  <button class="btn btn-default" type="submit">Button</button>
  <input class="btn btn-default" type="button" value="Input">
  <input class="btn btn-default" type="submit" value="Submit">


</body>
</html>

Click to view the demo





















Home »
  Bootstrap »
    Bootstrap »




Introduction
Basic HTML Style
List
Table
Form
Layout
Navigation Bar
Button
Control