<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" /> <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet"> <div class="section section-basic" id="basic-elements"> <div class="container"> <h3 class="title">Basic Elements</h3> <h4>Buttons</h4> <p class="category">Pick your style</p> <div class="row"> <div class="col-md-10"> <button class="btn btn-primary" type="button">Default</button> <button class="btn btn-primary btn-round" type="button">Round</button> <button class="btn btn-primary btn-round" type="button"> <i class="now-ui-icons ui-2_favourite-28"></i> With Icon </button> <button class="btn btn-primary btn-icon btn-round" type="button"> <i class="now-ui-icons ui-2_favourite-28"></i> </button> <button class="btn btn-primary btn-simple btn-round" type="button">Simple</button> </div> </div> <p class="category">Pick your size</p> <div class="row"> <div class="col-md-10"> <button class="btn btn-primary btn-sm">Small</button> <button class="btn btn-primary">Regular</button> <button class="btn btn-primary btn-lg">Large</button> </div> </div> <p class="category">Pick your color</p> <div class="row"> <div class="col-md-10"> <button class="btn">Default</button> <button class="btn btn-primary">Primary</button> <button class="btn btn-info">Info</button> <button class="btn btn-success">Success</button> <button class="btn btn-warning">Warning</button> <button class="btn btn-danger">Danger</button> <button class="btn btn-neutral">Neutral</button> </div> </div> <h4>Links</h4> <div class="row"> <div class="col-md-8"> <button class="btn btn-link">Default</button> <button class="btn btn-link btn-primary ">Primary</button> <button class="btn btn-link btn-info">Info</button> <button class="btn btn-link btn-success">Success</button> <button class="btn btn-link btn-warning">Warning</button> <button class="btn btn-link btn-danger">Danger</button> </div> </div> </div> </div> <footer class="footer text-center "> <p>Made with <a href="https://demos.creative-tim.com/now-ui-kit/index.html" target="_blank">Now UI Kit</a> by Creative Tim</p> </footer>

body { color: #2c2c2c; font-size: 14px; font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; } .btn { border-width: 2px; font-weight: 400; font-size: 0.8571em; line-height: 1.35em; margin: 10px 1px; border: none; border-radius: 0.1875rem; padding: 11px 22px; cursor: pointer; background-color: #888888; color: #FFFFFF; } .btn:hover, .btn:focus, .btn:not(:disabled):not(.disabled):active, .btn:not(:disabled):not(.disabled):active:focus, .btn:active:hover { background-color: #979797; color: #FFFFFF; box-shadow: none; } .btn:hover { box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.17); } .btn:disabled, .btn:disabled:hover, .btn:disabled:focus, .btn:disabled:active, .btn[disabled], .btn[disabled]:hover, .btn[disabled]:focus, .btn[disabled]:active { background-color: #888888; border-color: #888888; } .btn.btn-simple { color: #888888; border-color: #888888; } .btn.btn-simple:hover, .btn.btn-simple:focus, .btn.btn-simple:not(:disabled):not(.disabled):active, .btn.btn-simple:not(:disabled):not(.disabled):active:focus, .btn.btn-simple:active:hover { background-color: transparent; color: #979797; border-color: #979797; box-shadow: none; } .btn.btn-link { color: #888888; } .btn.btn-link:hover, .btn.btn-link:focus, .btn.btn-link:not(:disabled):not(.disabled):active, .btn.btn-link:not(:disabled):not(.disabled):active:focus, .btn.btn-link:active:hover { background-color: transparent; color: #979797; text-decoration: none; box-shadow: none; } .btn:hover, .btn:focus { opacity: 1; filter: alpha(opacity=100); outline: 0 !important; } .btn:active { -webkit-box-shadow: none; box-shadow: none; outline: 0 !important; } .btn.btn-icon { height: 2.375rem; min-width: 2.375rem; width: 2.375rem; padding: 0; font-size: 0.9375rem; overflow: hidden; position: relative; line-height: normal; } .btn.btn-icon.btn-simple { padding: 0; } .btn.btn-icon.btn-sm { height: 1.875rem; min-width: 1.875rem; width: 1.875rem; } .btn.btn-icon.btn-sm i.now-ui-icons { font-size: 0.6875rem; } .btn.btn-icon.btn-lg { height: 3.6rem; min-width: 3.6rem; width: 3.6rem; } .btn.btn-icon.btn-lg i.now-ui-icons { font-size: 1.325rem; } .btn.btn-icon:not(.btn-footer) i.now-ui-icons { position: absolute; top: 50%; left: 50%; transform: translate(-12px, -12px); line-height: 1.5626rem; width: 23px; } .btn:not(.btn-icon) .now-ui-icons { position: relative; top: 1px; } .btn-primary { background-color: #f96332; color: #FFFFFF; } .btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:active:hover { background-color: #fa7a50; color: #FFFFFF; box-shadow: none; } .btn-primary:hover { box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.17); } .btn-primary:disabled, .btn-primary:disabled:hover, .btn-primary:disabled:focus, .btn-primary:disabled:active, .btn-primary[disabled], .btn-primary[disabled]:hover, .btn-primary[disabled]:focus, .btn-primary[disabled]:active { background-color: #f96332; border-color: #f96332; } .btn-primary.btn-simple { color: #f96332; border-color: #f96332; } .btn-primary.btn-simple:hover, .btn-primary.btn-simple:focus, .btn-primary.btn-simple:not(:disabled):not(.disabled):active, .btn-primary.btn-simple:not(:disabled):not(.disabled):active:focus, .btn-primary.btn-simple:active:hover { background-color: transparent; color: #fa7a50; border-color: #fa7a50; box-shadow: none; } .btn-primary.btn-link { color: #f96332; } .btn-primary.btn-link:hover, .btn-primary.btn-link:focus, .btn-primary.btn-link:not(:disabled):not(.disabled):active, .btn-primary.btn-link:not(:disabled):not(.disabled):active:focus, .btn-primary.btn-link:active:hover { background-color: transparent; color: #fa7a50; text-decoration: none; box-shadow: none; } .btn-success { background-color: #18ce0f; color: #FFFFFF; } .btn-success:hover, .btn-success:focus, .btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:active:hover { background-color: #1beb11; color: #FFFFFF; box-shadow: none; } .btn-success:hover { box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.17); } .btn-success:disabled, .btn-success:disabled:hover, .btn-success:disabled:focus, .btn-success:disabled:active, .btn-success[disabled], .btn-success[disabled]:hover, .btn-success[disabled]:focus, .btn-success[disabled]:active { background-color: #18ce0f; border-color: #18ce0f; } .btn-success.btn-simple { color: #18ce0f; border-color: #18ce0f; } .btn-success.btn-simple:hover, .btn-success.btn-simple:focus, .btn-success.btn-simple:not(:disabled):not(.disabled):active, .btn-success.btn-simple:not(:disabled):not(.disabled):active:focus, .btn-success.btn-simple:active:hover { background-color: transparent; color: #1beb11; border-color: #1beb11; box-shadow: none; } .btn-success.btn-link { color: #18ce0f; } .btn-success.btn-link:hover, .btn-success.btn-link:focus, .btn-success.btn-link:not(:disabled):not(.disabled):active, .btn-success.btn-link:not(:disabled):not(.disabled):active:focus, .btn-success.btn-link:active:hover { background-color: transparent; color: #1beb11; text-decoration: none; box-shadow: none; } .btn-info { background-color: #2CA8FF; color: #FFFFFF; } .btn-info:hover, .btn-info:focus, .btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled):active:focus, .btn-info:active:hover { background-color: #4bb5ff; color: #FFFFFF; box-shadow: none; } .btn-info:hover { box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.17); } .btn-info:disabled, .btn-info:disabled:hover, .btn-info:disabled:focus, .btn-info:disabled:active, .btn-info[disabled], .btn-info[disabled]:hover, .btn-info[disabled]:focus, .btn-info[disabled]:active { background-color: #2CA8FF; border-color: #2CA8FF; } .btn-info.btn-simple { color: #2CA8FF; border-color: #2CA8FF; } .btn-info.btn-simple:hover, .btn-info.btn-simple:focus, .btn-info.btn-simple:not(:disabled):not(.disabled):active, .btn-info.btn-simple:not(:disabled):not(.disabled):active:focus, .btn-info.btn-simple:active:hover { background-color: transparent; color: #4bb5ff; border-color: #4bb5ff; box-shadow: none; } .btn-info.btn-link { color: #2CA8FF; } .btn-info.btn-link:hover, .btn-info.btn-link:focus, .btn-info.btn-link:not(:disabled):not(.disabled):active, .btn-info.btn-link:not(:disabled):not(.disabled):active:focus, .btn-info.btn-link:active:hover { background-color: transparent; color: #4bb5ff; text-decoration: none; box-shadow: none; } .btn-warning { background-color: #FFB236; color: #FFFFFF; } .btn-warning:hover, .btn-warning:focus, .btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled):active:focus, .btn-warning:active:hover { background-color: #ffbe55; color: #FFFFFF; box-shadow: none; } .btn-warning:hover { box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.17); } .btn-warning:disabled, .btn-warning:disabled:hover, .btn-warning:disabled:focus, .btn-warning:disabled:active, .btn-warning[disabled], .btn-warning[disabled]:hover, .btn-warning[disabled]:focus, .btn-warning[disabled]:active { background-color: #FFB236; border-color: #FFB236; } .btn-warning.btn-simple { color: #FFB236; border-color: #FFB236; } .btn-warning.btn-simple:hover, .btn-warning.btn-simple:focus, .btn-warning.btn-simple:not(:disabled):not(.disabled):active, .btn-warning.btn-simple:not(:disabled):not(.disabled):active:focus, .btn-warning.btn-simple:active:hover { background-color: transparent; color: #ffbe55; border-color: #ffbe55; box-shadow: none; } .btn-warning.btn-link { color: #FFB236; } .btn-warning.btn-link:hover, .btn-warning.btn-link:focus, .btn-warning.btn-link:not(:disabled):not(.disabled):active, .btn-warning.btn-link:not(:disabled):not(.disabled):active:focus, .btn-warning.btn-link:active:hover { background-color: transparent; color: #ffbe55; text-decoration: none; box-shadow: none; } .btn-danger { background-color: #FF3636; color: #FFFFFF; } .btn-danger:hover, .btn-danger:focus, .btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled):active:focus, .btn-danger:active:hover { background-color: #ff5555; color: #FFFFFF; box-shadow: none; } .btn-danger:hover { box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.17); } .btn-danger:disabled, .btn-danger:disabled:hover, .btn-danger:disabled:focus, .btn-danger:disabled:active, .btn-danger[disabled], .btn-danger[disabled]:hover, .btn-danger[disabled]:focus, .btn-danger[disabled]:active { background-color: #FF3636; border-color: #FF3636; } .btn-danger.btn-simple { color: #FF3636; border-color: #FF3636; } .btn-danger.btn-simple:hover, .btn-danger.btn-simple:focus, .btn-danger.btn-simple:not(:disabled):not(.disabled):active, .btn-danger.btn-simple:not(:disabled):not(.disabled):active:focus, .btn-danger.btn-simple:active:hover { background-color: transparent; color: #ff5555; border-color: #ff5555; box-shadow: none; } .btn-danger.btn-link { color: #FF3636; } .btn-danger.btn-link:hover, .btn-danger.btn-link:focus, .btn-danger.btn-link:not(:disabled):not(.disabled):active, .btn-danger.btn-link:not(:disabled):not(.disabled):active:focus, .btn-danger.btn-link:active:hover { background-color: transparent; color: #ff5555; text-decoration: none; box-shadow: none; } .btn-neutral { background-color: #FFFFFF; color: #f96332; } .btn-neutral:hover, .btn-neutral:focus, .btn-neutral:not(:disabled):not(.disabled):active, .btn-neutral:not(:disabled):not(.disabled):active:focus, .btn-neutral:active:hover { background-color: #FFFFFF; color: #FFFFFF; box-shadow: none; } .btn-neutral:hover { box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.17); } .btn-neutral:disabled, .btn-neutral:disabled:hover, .btn-neutral:disabled:focus, .btn-neutral:disabled:active, .btn-neutral[disabled], .btn-neutral[disabled]:hover, .btn-neutral[disabled]:focus, .btn-neutral[disabled]:active { background-color: #FFFFFF; border-color: #FFFFFF; } .btn-neutral.btn-danger { color: #FF3636; } .btn-neutral.btn-danger:hover, .btn-neutral.btn-danger:focus, .btn-neutral.btn-danger:active { color: #ff5555; } .btn-neutral.btn-primary { color: #f96332; } .btn-neutral.btn-primary:hover, .btn-neutral.btn-primary:focus, .btn-neutral.btn-primary:active { color: #fa7a50; } .btn-neutral.btn-info { color: #2CA8FF; } .btn-neutral.btn-info:hover, .btn-neutral.btn-info:focus, .btn-neutral.btn-info:active { color: #4bb5ff; } .btn-neutral.btn-warning { color: #FFB236; } .btn-neutral.btn-warning:hover, .btn-neutral.btn-warning:focus, .btn-neutral.btn-warning:active { color: #ffbe55; } .btn-neutral.btn-success { color: #18ce0f; } .btn-neutral.btn-success:hover, .btn-neutral.btn-success:focus, .btn-neutral.btn-success:active { color: #1beb11; } .btn-neutral:hover, .btn-neutral:focus, .btn-neutral:not(:disabled):not(.disabled):active, .btn-neutral:not(:disabled):not(.disabled):active:focus, .btn-neutral:active:hover { background-color: #FFFFFF; color: #fa7a50; box-shadow: none; } .btn-neutral:hover, .btn-neutral:focus { color: #fa7a50; } .btn-neutral:hover:not(.nav-link), .btn-neutral:focus:not(.nav-link) { box-shadow: none; } .btn-neutral.btn-simple { color: #FFFFFF; border-color: #FFFFFF; } .btn-neutral.btn-simple:hover, .btn-neutral.btn-simple:focus, .btn-neutral.btn-simple:not(:disabled):not(.disabled):active, .btn-neutral.btn-simple:not(:disabled):not(.disabled):active:focus, .btn-neutral.btn-simple:active:hover { background-color: transparent; color: #FFFFFF; border-color: #FFFFFF; box-shadow: none; } .btn-neutral.btn-link { color: #FFFFFF; } .btn-neutral.btn-link:hover, .btn-neutral.btn-link:focus, .btn-neutral.btn-link:not(:disabled):not(.disabled):active, .btn-neutral.btn-link:not(:disabled):not(.disabled):active:focus, .btn-neutral.btn-link:active:hover { background-color: transparent; color: #FFFFFF; text-decoration: none; box-shadow: none; } .btn-round { border-width: 1px; border-radius: 30px !important; padding: 11px 23px; } .btn-round.btn-simple { padding: 10px 22px; } .btn-simple { border: 1px solid; border-color: #888888; padding: 10px 22px; background-color: transparent; } .btn-simple:disabled, .btn-simple:disabled:hover, .btn-simple:disabled:focus, .btn-simple:disabled:active, .btn-simple[disabled], .btn-simple[disabled]:hover, .btn-simple[disabled]:focus, .btn-simple[disabled]:active, .btn-link:disabled, .btn-link:disabled:hover, .btn-link:disabled:focus, .btn-link:disabled:active, .btn-link[disabled], .btn-link[disabled]:hover, .btn-link[disabled]:focus, .btn-link[disabled]:active { background-color: transparent; } .btn-lg { font-size: 1em; border-radius: 0.25rem; padding: 15px 48px; } .btn-lg.btn-simple { padding: 14px 47px; } .btn-sm { font-size: 14px; border-radius: 0.1875rem; padding: 5px 15px; } .btn-sm.btn-simple { padding: 4px 14px; } .btn-link { border: 0; padding: 0.5rem 0.7rem; background-color: transparent; } button, input { font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; } h3, h4 { font-weight: 400; } h3, .h3 { font-size: 1.825em; margin-bottom: 30px; line-height: 1.4em; } h4, .h4 { font-size: 1.5em; line-height: 1.45em; margin-top: 30px; margin-bottom: 15px; } h4+.category, h4.title+.category, .h4+.category, .h4.title+.category { margin-top: -5px; } p { line-height: 1.61em; font-weight: 300; font-size: 1.2em; } .title { font-weight: 700; padding-top: 30px; } .title+.category { margin-top: -25px; } .category { text-transform: capitalize; font-weight: 700; color: #9A9A9A; } [data-toggle="collapse"][data-parent="#accordion"] i { -webkit-transition: transform 150ms ease 0s; -moz-transition: transform 150ms ease 0s; -o-transition: transform 150ms ease 0s; -ms-transition: all 150ms ease 0s; transition: transform 150ms ease 0s; } [data-toggle="collapse"][data-parent="#accordion"][aria-expanded="true"] i { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } @font-face { font-family: 'Nucleo Outline'; src: url("../fonts/nucleo-outline.eot"); src: url("../fonts/nucleo-outline.eot") format("embedded-opentype"), url("../fonts/nucleo-outline.woff2") format("woff2"), url("../fonts/nucleo-outline.woff") format("woff"), url("../fonts/nucleo-outline.ttf") format("truetype"); font-weight: normal; font-style: normal; } .now-ui-icons { display: inline-block; font: normal normal normal 14px/1 'Nucleo Outline'; font-size: inherit; speak: none; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @-webkit-keyframes nc-icon-spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @-moz-keyframes nc-icon-spin { 0% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); } } @keyframes nc-icon-spin { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } .now-ui-icons.ui-2_favourite-28:before { content: "\ea2b"; } .section { padding: 70px 0; position: relative; background: #FFFFFF; } .section .row+.category { margin-top: 15px; } [data-background-color="orange"] { background-color: #e95e38; } [data-background-color="black"] { background-color: #2c2c2c; } [data-background-color]:not([data-background-color="gray"]) { color: #FFFFFF; } [data-background-color]:not([data-background-color="gray"]) .title, [data-background-color]:not([data-background-color="gray"]) p { color: #FFFFFF; } [data-background-color]:not([data-background-color="gray"]) h3, [data-background-color]:not([data-background-color="gray"]) h4 { color: #FFFFFF; } [data-background-color]:not([data-background-color="gray"]) .btn.btn-simple { background-color: transparent; border-color: rgba(255, 255, 255, 0.5); color: #FFFFFF; } [data-background-color]:not([data-background-color="gray"]) .btn.btn-simple:hover, [data-background-color]:not([data-background-color="gray"]) .btn.btn-simple:focus, [data-background-color]:not([data-background-color="gray"]) .btn.btn-simple:not(:disabled):not(.disabled):active, [data-background-color]:not([data-background-color="gray"]) .btn.btn-simple:not(:disabled):not(.disabled):active:focus, [data-background-color]:not([data-background-color="gray"]) .btn.btn-simple:active:hover { background-color: transparent; border-color: #FFFFFF; color: #FFFFFF; } @media (max-width: 768px) { .btn { margin-bottom: 10px; } } .section-basic { padding-top: 0; } footer{ margin-top:50px; color: #555; background: #fff; padding: 25px; font-weight: 300; background: #f7f7f7; } .footer p{ margin-bottom: 0; } footer p a{ color: #555; font-weight: 400; } footer p a:hover{ color: #e86c42; } @font-face { font-family: 'Nucleo Outline'; src: url("https://github.com/creativetimofficial/now-ui-kit/blob/master/assets/fonts/nucleo-outline.eot"); src: url("https://github.com/creativetimofficial/now-ui-kit/blob/master/assets/fonts/nucleo-outline.eot") format("embedded-opentype"); src: url("https://raw.githack.com/creativetimofficial/now-ui-kit/master/assets/fonts/nucleo-outline.woff2"); font-weight: normal; font-style: normal; } .now-ui-icons { display: inline-block; font: normal normal normal 14px/1 'Nucleo Outline'; font-size: inherit; speak: none; text-transform: none; /* Better Font Rendering */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }