buttons.html 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <!-- meta tags -->
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7. <meta name="description" content="Bootstrap UI Kit">
  8. <meta name="keywords" content="ui kit">
  9. <meta name="author" content="UIdeck">
  10. <title>Button - Helium Bootstrap 4 UI Kit</title>
  11. <!-- CSS Files -->
  12. <link rel="stylesheet" href="css/bootstrap.min.css">
  13. <link rel="stylesheet" href="css/main.css">
  14. <link rel="stylesheet" href="css/animate.css">
  15. <link rel="stylesheet" href="css/owl.carousel.css">
  16. <link rel="stylesheet" href="css/owl.theme.css">
  17. <link rel="stylesheet" href="css/responsive.css">
  18. <!-- Fonts icons -->
  19. <link rel="stylesheet" href="css/font-awesome.min.css">
  20. </head>
  21. <body>
  22. <!-- Page Wrapper Start -->
  23. <div class="wrapper">
  24. <!-- Content Area Start -->
  25. <div id="content">
  26. <div class="container">
  27. <div class="row">
  28. <div class="col-12">
  29. <div class="page-header-title">
  30. <h2 class="heading-title text-center">Button styles</h2>
  31. </div>
  32. <!-- Standard Button -->
  33. <div class="standard-button">
  34. <div class="sub-title">
  35. <span>Standard Buttons</span>
  36. </div>
  37. <div class="standard-button-inner mtb-50">
  38. <div class="download">
  39. <button type="button" class="btn std-btn btn-border">
  40. <i class="fa fa-download icons"></i>
  41. Download
  42. </button>
  43. <button type="button" class="btn std-btn btn-filled">
  44. <i class="fa fa-download icons"></i>
  45. Download
  46. </button>
  47. <button type="button" class="btn std-btn btn-border btn-info">
  48. <i class="fa fa-download icons"></i>
  49. Download
  50. </button>
  51. <button type="button" class="btn std-btn btn-info-filled">
  52. <i class="fa fa-download icons"></i>
  53. Download
  54. </button>
  55. <button type="button" class="btn std-btn btn-warning">
  56. <i class="fa fa-download icons"></i>
  57. Download
  58. </button>
  59. <button type="button" class="btn std-btn btn-warning-filled">
  60. <i class="fa fa-download icons"></i>
  61. Download
  62. </button>
  63. <button type="button" class="btn std-btn btn-danger">
  64. <i class="fa fa-download icons"></i>
  65. Download
  66. </button>
  67. <button type="button" class="btn std-btn btn-danger-filled">
  68. <i class="fa fa-download icons"></i>
  69. Download
  70. </button>
  71. </div>
  72. <div class="view-more">
  73. <button type="button" class="btn std-btn btn-border">
  74. View more
  75. <i class="fa fa-arrow-circle-o-right icons"></i>
  76. </button>
  77. <button type="button" class="btn std-btn btn-filled">
  78. View more
  79. <i class="fa fa-arrow-circle-o-right icons"></i>
  80. </button>
  81. <button type="button" class="btn std-btn btn-border btn-info">
  82. View more
  83. <i class="fa fa-arrow-circle-o-right icons"></i>
  84. </button>
  85. <button type="button" class="btn std-btn btn-info-filled">
  86. View more
  87. <i class="fa fa-arrow-circle-o-right icons"></i>
  88. </button>
  89. <button type="button" class="btn std-btn btn-warning">
  90. View more
  91. <i class="fa fa-arrow-circle-o-right icons"></i>
  92. </button>
  93. <button type="button" class="btn std-btn btn-warning-filled">
  94. View more
  95. <i class="fa fa-arrow-circle-o-right icons"></i>
  96. </button>
  97. <button type="button" class="btn std-btn btn-danger">
  98. View more
  99. <i class="fa fa-arrow-circle-o-right icons"></i>
  100. </button>
  101. <button type="button" class="btn std-btn btn-danger-filled">
  102. View more
  103. <i class="fa fa-arrow-circle-o-right icons"></i>
  104. </button>
  105. </div>
  106. <div class="learn-more">
  107. <button type="button" class="btn std-btn btn-border">
  108. Learn more
  109. </button>
  110. <button type="button" class="btn std-btn btn-filled">
  111. Learn more
  112. </button>
  113. <button type="button" class="btn std-btn btn-border btn-info">
  114. Learn more
  115. </button>
  116. <button type="button" class="btn std-btn btn-info-filled">
  117. Learn more
  118. </button>
  119. <button type="button" class="btn std-btn btn-warning">
  120. Learn more
  121. </button>
  122. <button type="button" class="btn std-btn btn-warning-filled">
  123. Learn more
  124. </button>
  125. <button type="button" class="btn std-btn btn-danger">
  126. Learn more
  127. </button>
  128. <button type="button" class="btn std-btn btn-danger-filled">
  129. Learn more
  130. </button>
  131. </div>
  132. <div class="read-more">
  133. <button type="button" class="btn std-btn btn-border">
  134. Read more
  135. </button>
  136. <button type="button" class="btn std-btn btn-filled">
  137. Read more
  138. </button>
  139. <button type="button" class="btn std-btn btn-border btn-info">
  140. Read more
  141. </button>
  142. <button type="button" class="btn std-btn btn-info-filled">
  143. Read more
  144. </button>
  145. <button type="button" class="btn std-btn btn-warning">
  146. Read more
  147. </button>
  148. <button type="button" class="btn std-btn btn-warning-filled">
  149. Read more
  150. </button>
  151. <button type="button" class="btn std-btn btn-danger">
  152. Read more
  153. </button>
  154. <button type="button" class="btn std-btn btn-danger-filled">
  155. Read more
  156. </button>
  157. </div>
  158. </div>
  159. </div>
  160. <!-- Small Buttons -->
  161. <div class="small-buttons">
  162. <div class="sub-title">
  163. <span>Small Buttons</span>
  164. </div>
  165. <div class="small-buttons-inner mtb-50">
  166. <div class="download">
  167. <button type="button" class="btn std-btn btn-sm btn-border">
  168. <i class="fa fa-download icons"></i>
  169. Download
  170. </button>
  171. <button type="button" class="btn std-btn btn-sm btn-filled">
  172. <i class="fa fa-download icons"></i>
  173. Download
  174. </button>
  175. <button type="button" class="btn std-btn btn-sm btn-border btn-info">
  176. <i class="fa fa-download icons"></i>
  177. Download
  178. </button>
  179. <button type="button" class="btn std-btn btn-sm btn-info-filled">
  180. <i class="fa fa-download icons"></i>
  181. Download
  182. </button>
  183. <button type="button" class="btn std-btn btn-sm btn-warning">
  184. <i class="fa fa-download icons"></i>
  185. Download
  186. </button>
  187. <button type="button" class="btn std-btn btn-sm btn-warning-filled">
  188. <i class="fa fa-download icons"></i>
  189. Download
  190. </button>
  191. <button type="button" class="btn std-btn btn-sm btn-danger">
  192. <i class="fa fa-download icons"></i>
  193. Download
  194. </button>
  195. <button type="button" class="btn std-btn btn-sm btn-danger-filled">
  196. <i class="fa fa-download icons"></i>
  197. Download
  198. </button>
  199. </div>
  200. <div class="view-more">
  201. <button type="button" class="btn std-btn btn-sm btn-border">
  202. View more
  203. <i class="fa fa-arrow-circle-o-right icons"></i>
  204. </button>
  205. <button type="button" class="btn std-btn btn-sm btn-filled">
  206. View more
  207. <i class="fa fa-arrow-circle-o-right icons"></i>
  208. </button>
  209. <button type="button" class="btn std-btn btn-sm btn-border btn-info">
  210. View more
  211. <i class="fa fa-arrow-circle-o-right icons"></i>
  212. </button>
  213. <button type="button" class="btn std-btn btn-sm btn-info-filled">
  214. View more
  215. <i class="fa fa-arrow-circle-o-right icons"></i>
  216. </button>
  217. <button type="button" class="btn std-btn btn-sm btn-warning">
  218. View more
  219. <i class="fa fa-arrow-circle-o-right icons"></i>
  220. </button>
  221. <button type="button" class="btn std-btn btn-sm btn-warning-filled">
  222. View more
  223. <i class="fa fa-arrow-circle-o-right icons"></i>
  224. </button>
  225. <button type="button" class="btn std-btn btn-sm btn-danger">
  226. View more
  227. <i class="fa fa-arrow-circle-o-right icons"></i>
  228. </button>
  229. <button type="button" class="btn std-btn btn-sm btn-danger-filled">
  230. View more
  231. <i class="fa fa-arrow-circle-o-right icons"></i>
  232. </button>
  233. </div>
  234. <div class="learn-more">
  235. <button type="button" class="btn std-btn btn-sm btn-border">
  236. Learn more
  237. </button>
  238. <button type="button" class="btn std-btn btn-sm btn-filled">
  239. Learn more
  240. </button>
  241. <button type="button" class="btn std-btn btn-sm btn-border btn-info">
  242. Learn more
  243. </button>
  244. <button type="button" class="btn std-btn btn-sm btn-info-filled">
  245. Learn more
  246. </button>
  247. <button type="button" class="btn std-btn btn-sm btn-warning">
  248. Learn more
  249. </button>
  250. <button type="button" class="btn std-btn btn-sm btn-warning-filled">
  251. Learn more
  252. </button>
  253. <button type="button" class="btn std-btn btn-sm btn-danger">
  254. Learn more
  255. </button>
  256. <button type="button" class="btn std-btn btn-sm btn-danger-filled">
  257. Learn more
  258. </button>
  259. </div>
  260. <div class="read-more">
  261. <button type="button" class="btn std-btn btn-sm btn-border">
  262. Read more
  263. </button>
  264. <button type="button" class="btn std-btn btn-sm btn-filled">
  265. Read more
  266. </button>
  267. <button type="button" class="btn std-btn btn-sm btn-border btn-info">
  268. Read more
  269. </button>
  270. <button type="button" class="btn std-btn btn-sm btn-info-filled">
  271. Read more
  272. </button>
  273. <button type="button" class="btn std-btn btn-sm btn-warning">
  274. Read more
  275. </button>
  276. <button type="button" class="btn std-btn btn-sm btn-warning-filled">
  277. Read more
  278. </button>
  279. <button type="button" class="btn std-btn btn-sm btn-danger">
  280. Read more
  281. </button>
  282. <button type="button" class="btn std-btn btn-sm btn-danger-filled">
  283. Read more
  284. </button>
  285. </div>
  286. </div>
  287. </div>
  288. <!-- Large Buttons -->
  289. <div class="large-buttons">
  290. <div class="sub-title">
  291. <span>Large Buttons</span>
  292. </div>
  293. <div class="large-buttons-inner mtb-50">
  294. <div class="download">
  295. <button type="button" class="btn std-btn btn-lg btn-border">
  296. <i class="fa fa-download icons"></i>
  297. Download
  298. </button>
  299. <button type="button" class="btn std-btn btn-lg btn-filled">
  300. <i class="fa fa-download icons"></i>
  301. Download
  302. </button>
  303. <button type="button" class="btn std-btn btn-lg btn-info">
  304. <i class="fa fa-download icons"></i>
  305. Download
  306. </button>
  307. <button type="button" class="btn std-btn btn-lg btn-info-filled">
  308. <i class="fa fa-download icons"></i>
  309. Download
  310. </button>
  311. <button type="button" class="btn std-btn btn-lg btn-warning">
  312. <i class="fa fa-download icons"></i>
  313. Download
  314. </button>
  315. <button type="button" class="btn std-btn btn-lg btn-danger">
  316. <i class="fa fa-download icons"></i>
  317. Download
  318. </button>
  319. <button type="button" class="btn std-btn btn-lg btn-danger-filled">
  320. <i class="fa fa-download icons"></i>
  321. Download
  322. </button>
  323. </div>
  324. <div class="view-more">
  325. <button type="button" class="btn std-btn btn-lg btn-border">
  326. View more
  327. <i class="fa fa-arrow-circle-o-right icons"></i>
  328. </button>
  329. <button type="button" class="btn std-btn btn-lg btn-filled">
  330. View more
  331. <i class="fa fa-arrow-circle-o-right icons"></i>
  332. </button>
  333. <button type="button" class="btn std-btn btn-lg btn-info">
  334. View more
  335. <i class="fa fa-arrow-circle-o-right icons"></i>
  336. </button>
  337. <button type="button" class="btn std-btn btn-lg btn-info-filled">
  338. View more
  339. <i class="fa fa-arrow-circle-o-right icons"></i>
  340. </button>
  341. <button type="button" class="btn std-btn btn-lg btn-warning">
  342. View more
  343. <i class="fa fa-arrow-circle-o-right icons"></i>
  344. </button>
  345. <button type="button" class="btn std-btn btn-lg btn-danger">
  346. View more
  347. <i class="fa fa-arrow-circle-o-right icons"></i>
  348. </button>
  349. <button type="button" class="btn std-btn btn-lg btn-danger-filled">
  350. View more
  351. <i class="fa fa-arrow-circle-o-right icons"></i>
  352. </button>
  353. </div>
  354. <div class="learn-more">
  355. <button type="button" class="btn std-btn btn-lg btn-border">
  356. Learn more
  357. </button>
  358. <button type="button" class="btn std-btn btn-lg btn-filled">
  359. Learn more
  360. </button>
  361. <button type="button" class="btn std-btn btn-lg btn-info">
  362. Learn more
  363. </button>
  364. <button type="button" class="btn std-btn btn-lg btn-info-filled">
  365. Learn more
  366. </button>
  367. <button type="button" class="btn std-btn btn-lg btn-warning">
  368. Learn more
  369. </button>
  370. <button type="button" class="btn std-btn btn-lg btn-danger">
  371. Learn more
  372. </button>
  373. <button type="button" class="btn std-btn btn-lg btn-danger-filled">
  374. Learn more
  375. </button>
  376. </div>
  377. <div class="learn-more2">
  378. <button type="button" class="btn std-btn btn-lg btn-border">
  379. Learn more
  380. </button>
  381. <button type="button" class="btn std-btn btn-lg btn-filled">
  382. Learn more
  383. </button>
  384. <button type="button" class="btn std-btn btn-lg btn-info">
  385. Learn more
  386. </button>
  387. <button type="button" class="btn std-btn btn-lg btn-info-filled">
  388. Learn more
  389. </button>
  390. <button type="button" class="btn std-btn btn-lg btn-warning">
  391. Learn more
  392. </button>
  393. <button type="button" class="btn std-btn btn-lg btn-danger">
  394. Learn more
  395. </button>
  396. <button type="button" class="btn std-btn btn-lg btn-danger-filled">
  397. Learn more
  398. </button>
  399. </div>
  400. </div>
  401. </div>
  402. <!-- Xtra Large Buttons -->
  403. <div class="xtra-large-buttons">
  404. <div class="sub-title">
  405. <span>Extra Large Buttons</span>
  406. </div>
  407. <div class="xtra-large-buttons-inner mtb-50">
  408. <div class="download">
  409. <button type="button" class="btn std-btn btn-xlg btn-border">
  410. <i class="fa fa-download icons"></i>
  411. Download
  412. </button>
  413. <button type="button" class="btn std-btn btn-xlg btn-filled">
  414. <i class="fa fa-download icons"></i>
  415. Download
  416. </button>
  417. <button type="button" class="btn std-btn btn-xlg btn-info">
  418. <i class="fa fa-download icons"></i>
  419. Download
  420. </button>
  421. <button type="button" class="btn std-btn btn-xlg btn-info-filled">
  422. <i class="fa fa-download icons"></i>
  423. Download
  424. </button>
  425. <button type="button" class="btn std-btn btn-danger btn-xlg ">
  426. <i class="fa fa-download icons"></i>
  427. Download
  428. </button>
  429. <button type="button" class="btn std-btn btn-danger-filled btn-xlg ">
  430. <i class="fa fa-download icons"></i>
  431. Download
  432. </button>
  433. </div>
  434. <div class="view-more">
  435. <button type="button" class="btn std-btn btn-xlg btn-border">
  436. View more
  437. <i class="fa fa-arrow-circle-o-right icons"></i>
  438. </button>
  439. <button type="button" class="btn std-btn btn-xlg btn-filled">
  440. View more
  441. <i class="fa fa-arrow-circle-o-right icons"></i>
  442. </button>
  443. <button type="button" class="btn std-btn btn-xlg btn-info">
  444. View more
  445. <i class="fa fa-arrow-circle-o-right icons"></i>
  446. </button>
  447. <button type="button" class="btn std-btn btn-xlg btn-info-filled">
  448. View more
  449. <i class="fa fa-arrow-circle-o-right icons"></i>
  450. </button>
  451. <button type="button" class="btn std-btn btn-danger btn-xlg ">
  452. View more
  453. <i class="fa fa-arrow-circle-o-right icons"></i>
  454. </button>
  455. <button type="button" class="btn std-btn btn-danger-filled btn-xlg ">
  456. View more
  457. <i class="fa fa-arrow-circle-o-right icons"></i>
  458. </button>
  459. </div>
  460. <div class="learn-more">
  461. <button type="button" class="btn std-btn btn-xlg btn-border">
  462. Learn more
  463. </button>
  464. <button type="button" class="btn std-btn btn-xlg btn-filled">
  465. Learn more
  466. </button>
  467. <button type="button" class="btn std-btn btn-xlg btn-info">
  468. Learn more
  469. </button>
  470. <button type="button" class="btn std-btn btn-xlg btn-info-filled">
  471. Learn more
  472. </button>
  473. <button type="button" class="btn std-btn btn-xlg btn-danger ">
  474. Learn more
  475. </button>
  476. <button type="button" class="btn std-btn btn-xlg btn-danger-filled ">
  477. Learn more
  478. </button>
  479. </div>
  480. <div class="read-more">
  481. <button type="button" class="btn std-btn btn-xlg btn-border">
  482. Read more
  483. </button>
  484. <button type="button" class="btn std-btn btn-xlg btn-filled">
  485. Read more
  486. </button>
  487. <button type="button" class="btn std-btn btn-xlg btn-info">
  488. Read more
  489. </button>
  490. <button type="button" class="btn std-btn btn-xlg btn-info-filled">
  491. Read more
  492. </button>
  493. <button type="button" class="btn std-btn btn-danger btn-xlg ">
  494. Read more
  495. </button>
  496. <button type="button" class="btn std-btn btn-danger-filled btn-xlg ">
  497. Read more
  498. </button>
  499. </div>
  500. </div>
  501. </div>
  502. </div>
  503. </div>
  504. </div>
  505. </div>
  506. <!-- Content Area End -->
  507. <div class="text-center">Love this UI Kit? Get more Free and Premium <a href="https://rebrand.ly/uideck-uikits">Bootstrap UI Kits</a> and <a href="https://rebrand.ly/uideck-themes">Bootstrap Templates</a></div>
  508. </div>
  509. <!-- Page Wrapper End -->
  510. <!-- jQuery first, then Tether, then Bootstrap JS. -->
  511. <script src="js/jquery.min.js"></script>
  512. <script src="js/popper.min.js"></script>
  513. <script src="js/bootstrap.min.js"></script>
  514. <script src="js/owl.carousel.min.js"></script>
  515. <script src="js/form-validator.min.js"></script>
  516. <script src="js/contact-form-script.js"></script>
  517. <script src="js/main.js"></script>
  518. </body>
  519. </html>