Create Rounded Corners buttons using Bootstrap CSS classes in HTML,PHP

How to design rounded corners button with hover effects inside HTML, PHP web page.

Bootstrap gives us 6 types of different button styles including hover effects already pre-built. Another one style for adding simple links inside web pages with text decoration underline style. So here is the complete step by step tutorial for Create Rounded Corners buttons using Bootstrap CSS classes in HTML,PHP.

Name list of All seven button styles CSS classes :

  • .btn-default
  • .btn-link
  • .btn-success
  • .btn-info
  • .btn-primary
  • .btn-danger
  • .btn-warning

How to Create Rounded Corners buttons using Bootstrap CSS classes in HTML,PHP.

https://www.android-examples.com/demo/heading-tag.html
Code for buttons.html file.

 <!doctype html>
<html>
<head>

<title>Buttons</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>

<body>
<div class="container">

<h1> Bootstrap Buttons</h1>
 <button type="button" class="btn btn-default">Default Button</button>
 <button type="button" class="btn btn-link">Link</button>
 <button type="button" class="btn btn-success">Success Button</button>
 <button type="button" class="btn btn-info">Info button</button></br></br>
 <button type="button" class="btn btn-primary">Primary Button</button>
 <button type="button" class="btn btn-danger">Danger button</button>
 <button type="button" class="btn btn-warning">Warning Button</button></br></br>

</div>
</body>
</html>

Screenshot:

Create Rounded Corners buttons using Bootstrap CSS classes in HTML,PHP

Leave a Reply

Your email address will not be published. Required fields are marked *