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 a v a2s . c o m-->
<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>
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><!--from w w w . ja v a2 s . c o 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>