-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
102 lines (102 loc) · 11.3 KB
/
index.html
File metadata and controls
102 lines (102 loc) · 11.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<html>
<title>Designs</title>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Start your development with a Design System for Bootstrap 4.">
<meta name="author" content="Amit Singh Sansoya">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/core.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
</head>
<body>
<section>
<div class="container-fluid">
<div class="row start">
<div class="col-sm-4 bush animated slideInLeft">
<h1 style="font-family: 'Poppins';font-weight: bolder;">Random Buttons</h1>
<span style="font-size: 0.8rem;font-weight:800;">Designed by Amit Singh Sansoya</span>
</div>
<div class="col-sm-8 col-lg-8 colt animated slideInRight">
<div class="formcheck initial1">
<button class="btn make mb1" value="btn make mb1" id="fm_1" onclick="fun(1)">Submit</button>
<button class="btn make mb2" value="btn make mb2" id="fm_2" onclick="fun(2)"><i class="fa fa-eye" aria-hidden="true"></i> Observe</button>
<button class="btn make mb3" value="btn make mb3" id="fm_3" onclick="fun(3)"><i class="fa fa-search" aria-hidden="true"></i> Search</button>
<button class="btn make mb4" value="btn make mb4" id="fm_4" onclick="fun(4)"><i class="fa fa-dribbble" aria-hidden="true"></i> Dribbble</button>
<button class="btn make mb5" value="btn make mb5" id="fm_5" onclick="fun(5)"><i class="fa fa-facebook-square" aria-hidden="true"></i> Facebook</button>
<button class="btn make mb6" value="btn make mb6" id="fm_6" onclick="fun(6)"><i class="fa fa-send" aria-hidden="true"></i> Transfer</button>
<button class="btn make mb7" value="btn make mb7" id="fm_7" onclick="fun(7)"><i class="fa fa-minus-circle" aria-hidden="true"></i> Delete</button>
<button class="btn make mb8" value="btn make mb8" id="fm_8" onclick="fun(8)"><i class="fa fa-share-square" aria-hidden="true"></i> Share</button>
<button class="btn make mb9" value="btn make mb9" id="fm_9" onclick="fun(9)"><i class="fa fa-shopping-basket" aria-hidden="true"></i> Cart</button>
<button class="btn make mb5" value="btn make mb5" id="fm_10" onclick="fun(10)"><i class="fa fa-code-fork" aria-hidden="true"></i> Fork</button>
<button class="btn make mb9" value="btn make mb9" id="fm_11" onclick="fun(11)"><i class="fa fa-code" aria-hidden="true"></i> Code Start</button>
<button class="btn make mb2" value="btn make mb2" id="fm_12" onclick="fun(12)"><i class="fa fa-Phone" aria-hidden="true"></i> Call</button>
<button class="btn make mb4" value="btn make mb4" id="fm_13" onclick="fun(13)">Add Element <i class="fa fa-plus" aria-hidden="true"></i></button>
<button class="btn make mb3" value="btn make mb3" id="fm_14" onclick="fun(14)"><i class="fa fa-user" aria-hidden="true"></i> Login</button>
<button class="btn make mb7" value="btn make mb7" id="fm_15" onclick="fun(15)"><i class="fa fa-video-camera" aria-hidden="true"></i> Capture</button>
<button class="btn make mb6" value="btn make mb6" id="fm_16" onclick="fun(16)"><i class="fa fa-wrench" aria-hidden="true"></i> Repair</button>
<button class="btn make mb9" value="btn make mb9" id="fm_17" onclick="fun(17)"><i class="fa fa-thumbs-up" aria-hidden="true"></i> Like</button>
<button class="btn make mb1" value="btn make mb1" id="fm_18" onclick="fun(18)"><i class="fa fa-hand-spock-o" aria-hidden="true"></i> Hi</button>
<button class="btn make mb4" value="btn make mb4" id="fm_19" onclick="fun(19)"><i class="fa fa-play" aria-hidden="true"></i> Play</button>
<button class="btn make mb2" value="btn make mb2" id="fm_20" onclick="fun(20)"><i class="fa fa-stop" aria-hidden="true"></i> Stop</button>
<button class="btn make mb3" value="btn make mb3" id="fm_21" onclick="fun(21)"><i class="fa fa-refresh" aria-hidden="true"></i> Refresh</button>
<button class="btn make mb7" value="btn make mb7" id="fm_22" onclick="fun(22)"><i class="fa fa-comment" aria-hidden="true"></i> Comment</button>
<button class="btn make mb6" value="btn make mb6" id="fm_23" onclick="fun(23)"><i class="fa fa-download" aria-hidden="true"></i> Download</button>
<button class="btn make mb5" value="btn make mb5" id="fm_24" onclick="fun(24)"><i class="fa fa-power-off" aria-hidden="true"></i> Power off</button>
<button class="btn make mb8" value="btn make mb8" id="fm_25" onclick="fun(25)"><i class="fa fa-check-circle" aria-hidden="true"></i> Sync</button>
<button class="btn make mb9" value="btn make mb9" id="fm_26" onclick="fun(26)"><i class="fa fa-warning" aria-hidden="true"></i> Warning</button>
<button class="btn make mb6" value="btn make mb6" id="fm_27" onclick="fun(27)"><i class="fa fa-file-text" aria-hidden="true"></i> File Upload</button>
<button class="btn make mb8" value="btn make mb8" id="fm_28" onclick="fun(28)"><i class="fa fa-repeat" aria-hidden="true"></i> Repeat</button>
<button class="btn make mb7" value="btn make mb7" id="fm_29" onclick="fun(29)"><i class="fa fa-heart" aria-hidden="true"></i> Love</button>
<button class="btn make mb4" value="btn make mb4" id="fm_30" onclick="fun(30)"><i class="fa fa-bell" aria-hidden="true"></i> Notifications</button>
<button class="btn make mb3" value="btn make mb3" id="fm_31" onclick="fun(31)"><i class="fa fa-bookmark" aria-hidden="true"></i> Bookmark</button>
<button class="btn make mb2" value="btn make mb2" id="fm_32" onclick="fun(32)"><i class="fa fa-retweet" aria-hidden="true"></i> Retweet</button>
<button class="btn make mb7" value="btn make mb7" id="fm_33" onclick="fun(33)"><i class="fa fa-remove" aria-hidden="true"></i> Remove</button>
</div>
</div>
<div class="col-sm-8 col-lg-12 animated SlideInUp">
<h1 style="font-family: 'Poppins';font-weight: bolder;">What's this?</h1>
<p style="font-family:'Quicksand';font-weight: 500;">This was just a try of making a framework which represents the various buttons and so that one can use them in there project. The use is simple include the css file of it in your project and add class name. The buttons would appear.
</p>
<h3 style="font-family: 'Poppins';font-weight: bolder;">Example Use</h3>
<span style="font-family:'Quicksand';font-weight: 500;"> Here is the example to use facebook button : </span>
<span><button class="btn make mb5"><i class="fa fa-facebook-square" aria-hidden="true"></i> Facebook </button></span>
<p style="color:tomato">**Just Click the button and the class would be copied</p>
<p>
mb5 represents color code,make is button configuration
</p>
<h3 style="font-family: 'Poppins';font-weight: bolder;">Result</h3>
<button class="btn make mb5 fm_5"><i class="fa fa-facebook-square" aria-hidden="true"></i> Facebook</button>
<h4 style="font-family: 'Poppins';font-weight: bolder;margin-top:20px">Thought</h4>
<p>This is just a simple page actually, just to check the stuff it was built even if you like it we are glad that we are helpful.</p>
<h4 style="font-family: 'Poppins';font-weight: bolder;">Contact</h4>
<h5 style="font-family: 'Poppins';font-weight: bolder;">Amit Singh Sansoya</h5>
<a href="https://www.facebook.com/amit3200" class="btn make mb5">Facebook</a>
<a href="https://www.instagram.com/amit3200/?hl=en" class="btn make mb4">Instagram</a>
<a href="https://github.com/Amit3200" class="btn make mb2">Github</a>
</div>
</div>
</div>
</section>
<script>
function fun(x){
var copyText = document.getElementById("fm_"+x);
var fullLink = document.createElement('input');
document.body.appendChild(fullLink);
fullLink.value = copyText.value;
fullLink.select();
console.log(fullLink.value);
document.execCommand("copy");
swal("Got it!","Class Name Copied", "success");
}
</script>
</body>
</html>