We use cookies to ensure you get the best experience on our website
Home Explore Help
Sign In
mirror
/
assets
mirror of https://github.com/vladimirok5959/assets.git
2
0
Fork 0
Files Wiki
Browse Source

Buttons

Volodymyr Tkach 2 years ago
parent
d6fc64008a
commit
4ffe555810
3 changed files with 118 additions and 5 deletions
Split View Show Diff Stats
  1. 92 0
      css/controls/button/button.css
  2. 21 0
      css/controls/button/example.html
  3. 5 5
      css/controls/checkbox/example.html

+ 92 - 0
css/controls/button/button.css
View File 

@@ -0,0 +1,92 @@
 
+.btn {
 
+	border-radius: 4px;
 
+	border: 1px solid transparent;
 
+	color: #fff;
 
+	display: inline-block;
 
+	font-size: 16px;
 
+	font-weight: 400;
 
+	line-height: 1.5;
 
+	padding: 6px 12px;
 
+	text-align: center;
 
+	text-decoration: none;
 
+	transition: all .15s ease-in-out;
 
+	user-select: none;
 
+	vertical-align: middle;
 
+	white-space: nowrap;
 
+}
 
+
 
+.btn:focus,
 
+.btn:hover {
 
+	text-decoration: none;
 
+}
 
+
 
+.btn:focus {
 
+	box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
 
+	outline: 0;
 
+}
 
+
 
+.btn:not(:disabled):not(.disabled) {
 
+	cursor: pointer;
 
+}
 
+
 
+/* Blue */
 
+.btn.blue {
 
+	background-color: #0d6efd;
 
+	border-color: #0d6efd;
 
+}
 
+
 
+.btn.blue:hover {
 
+	background-color: #0b5ed7;
 
+	border-color: #0a58ca;
 
+}
 
+
 
+.btn.blue:focus {
 
+	box-shadow: 0 0 0 0.25rem rgb(49 132 253 / 50%);
 
+}
 
+
 
+/* Green */
 
+.btn.green {
 
+	background-color: #198754;
 
+	border-color: #198754;
 
+}
 
+
 
+.btn.green:hover {
 
+	background-color: #157347;
 
+	border-color: #146c43;
 
+}
 
+
 
+.btn.green:focus {
 
+	box-shadow: 0 0 0 0.25rem rgb(60 153 110 / 50%);
 
+}
 
+
 
+/* Red */
 
+.btn.red {
 
+	background-color: #bb2d3b;
 
+	border-color: #b02a37;
 
+}
 
+
 
+.btn.red:hover {
 
+	background-color: #bb2d3b;
 
+	border-color: #b02a37;
 
+}
 
+
 
+.btn.red:focus {
 
+	box-shadow: 0 0 0 0.25rem rgb(225 83 97 / 50%);
 
+}
 
+
 
+/* White */
 
+.btn.white {
 
+	background-color: #f8f9fa;
 
+	border-color: #f8f9fa;
 
+	color: #000;
 
+}
 
+
 
+.btn.white:hover {
 
+	background-color: #f9fafb;
 
+	border-color: #f9fafb;
 
+	color: #000;
 
+}
 
+
 
+.btn.white:focus {
 
+	box-shadow: 0 0 0 0.25rem rgb(211 212 213 / 50%);
 
+}

+ 21 - 0
css/controls/button/example.html
View File 

@@ -0,0 +1,21 @@
 
+<!doctype html>
 
+<html>
 
+	<head>
 
+		<meta charset="utf-8" />
 
+		<link rel="stylesheet" href="./../../reset.css">
 
+		<link rel="stylesheet" href="./button.css">
 
+	</head>
 
+	<body>
 
+		<div style="padding: 10px; background-color: gray;">
 
+			<button class="btn">Button</button>
 
+			<br><br>
 
+			<button class="btn blue">Button</button>
 
+			<br><br>
 
+			<button class="btn green">Button</button>
 
+			<br><br>
 
+			<button class="btn red">Button</button>
 
+			<br><br>
 
+			<button class="btn white">Button</button>
 
+		</div>
 
+	</body>
 
+</html>

+ 5 - 5
css/controls/checkbox/example.html
View File 

@@ -6,27 +6,27 @@
 
 		<link rel="stylesheet" href="./ios.css">
 
 	</head>
 
 	<body>
 
-		<div style="background-color: gray;">
 
+		<div style="padding: 10px; background-color: gray;">
 
 			<div class="checkbox-ios">
 
 				<input type="checkbox" id="lbl_name" name="name" />
 
 				<label for="lbl_name"></label>
 
 			</div>
 
-			<br>
 
+			<br><br>
 
 			<div class="checkbox-ios blue">
 
 				<input type="checkbox" id="lbl_name_blue" name="name_blue" />
 
 				<label for="lbl_name_blue"></label>
 
 			</div>
 
-			<br>
 
+			<br><br>
 
 			<div class="checkbox-ios green">
 
 				<input type="checkbox" id="lbl_name_green" name="name_green" />
 
 				<label for="lbl_name_green"></label>
 
 			</div>
 
-			<br>
 
+			<br><br>
 
 			<div class="checkbox-ios red">
 
 				<input type="checkbox" id="lbl_name_red" name="name_red" />
 
 				<label for="lbl_name_red"></label>
 
 			</div>
 
-			<br>
 
+			<br><br>
 
 			<div class="checkbox-ios white">
 
 				<input type="checkbox" id="lbl_name_white" name="name_white" />
 
 				<label for="lbl_name_white"></label>