Created
June 7, 2018 07:17
-
-
Save muhammadawaisshaikh/6dc28b5379d3d55405f90d5179fbc003 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Custom Material Design Button Styling</title> | |
<meta charset="UTF-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0"> | |
</head> | |
<!-- bootstrap cdn --> | |
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"> | |
<!-- fontawesome cdn --> | |
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous"> | |
<!-- custom style --> | |
<link rel="stylesheet" type="text/css" href="style.css"> | |
<body> | |
<!-- normal buttons --> | |
<div class="container"> | |
<h4>Normal Buttons</h4> | |
<a class="button default-btn" href="#">btn-default</a> | |
<a class="button success-btn" href="#">btn-success</a> | |
<a class="button primary-btn" href="#">btn-primary</a> | |
<a class="button warning-btn" href="#">btn-warning</a> | |
<a class="button danger-btn" href="#">btn-danger</a> | |
</div> | |
<hr> | |
<!-- chip buttons --> | |
<div class="container"> | |
<h4>Chip Buttons</h4> | |
<a class="button chip default-btn" href="#">btn-default</a> | |
<a class="button chip success-btn" href="#">btn-success</a> | |
<a class="button chip primary-btn" href="#">btn-primary</a> | |
<a class="button chip warning-btn" href="#">btn-warning</a> | |
<a class="button chip danger-btn" href="#">btn-danger</a> | |
</div> | |
<!-- jquery 3 cdn --> | |
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script> | |
<!-- bootstrap cdn --> | |
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script> | |
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script> | |
<!-- custom script --> | |
<script type="text/javascript" src="custom.js"></script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment