Buttons

Simple buttons
Huge button
Button preview
Css to copy
/*--Rest--*/.hg-btn { text-decoration:none; padding:29px 52px; text-transform:uppercase; font-size:25px; color:#FF6600; display:inline-block; font-weight:700; border:5px solid #FF6000; transition:all .2s ease-out; }/*--Hover--*/.hg-btn:hover { color:#fff; background:#FF6600; }
Big button
Button preview
Css to copy
/*--Rest--*/.bg-btn { text-decoration:none; padding:18px 52px; text-transform:uppercase; font-size:25px; color:#FF6600; display:inline-block; font-weight:700; border:4px solid #FF6000; transition:all .2s ease-out; }/*--Hover--*/.bg-btn:hover { color:#fff; background:#FF6600; }
Large button
Button preview
Css to copy
/*--Rest--*/.lg-btn { text-decoration:none; padding:12px 72px; font-size:20px; text-transform:uppercase; border:3px solid #FF6000; color:#FF6600; display:inline-block; font-weight:700; transition:all .2s ease-out; }/*--Hover--*/.lg-btn:hover { color:#fff; background:#FF6600; }
Huge button blue
Button preview
Css to copy
/*--Rest--*/.hg-btn-blue { text-decoration:none; padding:29px 52px; text-transform:uppercase; font-size:25px; color:#2BB5E3; display:inline-block; font-weight:700; border:5px solid #2BB5E3; transition:all .2s ease-out; }/*--Hover--*/.hg-btn-blue:hover { color:#fff; background:#2BB5E3; }
Big button blue
Button preview
Css to copy
/*--Rest--*/.bg-btn-blue { text-decoration:none; padding:18px 52px; text-transform:uppercase; font-size:25px; color:#2BB5E3; display:inline-block; font-weight:700; border:4px solid #2BB5E3; transition:all .2s ease-out; }/*--Hover--*/.bg-btn-blue:hover { color:#fff; background:#2BB5E3; }
Large button blue
Button preview
Css to copy
/*--Rest--*/.lg-btn-blue { text-decoration:none; padding:12px 72px; font-size:20px; text-transform:uppercase; border:3px solid #2BB5E3; color:#2BB5E3; display:inline-block; font-weight:700; transition:all .2s ease-out; }/*--Hover--*/.lg-btn-blue:hover { color:#fff; background:#2BB5E3; }
Huge button black
Button preview
Css to copy
/*--Rest--*/.hg-btn-black { text-decoration:none; padding:29px 52px; text-transform:uppercase; font-size:25px; color:#2BB5E3; display:inline-block; font-weight:700; border:5px solid #2BB5E3; transition:all .2s ease-out; }/*--Hover--*/.hg-btn-black:hover { color:#fff; background:#2BB5E3; }
Big button black
Button preview
Css to copy
/*--Rest--*/.bg-btn-black { text-decoration:none; padding:18px 52px; text-transform:uppercase; font-size:25px; color:#000; display:inline-block; font-weight:700; border:4px solid #000; transition:all .2s ease-out; }/*--Hover--*/.bg-btn-black:hover { color:#fff; background:#000; }
Large button black
Button preview
Css to copy
/*--Rest--*/.lg-btn-black { text-decoration:none; padding:12px 72px; font-size:20px; text-transform:uppercase; border:3px solid #000; color:#000; display:inline-block; font-weight:700; transition:all .2s ease-out; }/*--Hover--*/.lg-btn-black:hover { color:#fff; background:#000; }
Huge button white
Button preview
Css to copy
/*--Rest--*/.hg-btn-white { text-decoration:none; padding:29px 52px; text-transform:uppercase; font-size:25px; color:#fff; display:inline-block; font-weight:700; border:5px solid #fff; transition:all .2s ease-out; }/*--Hover--*/.hg-btn-white:hover { color:#2bb5e3; background:#fff; }
Big button white
Button preview
Css to copy
/*--Rest--*/.bg-btn-white { text-decoration:none; padding:18px 52px; text-transform:uppercase; font-size:25px; color:#fff; display:inline-block; font-weight:700; border:4px solid #fff; transition:all .2s ease-out; }/*--Hover--*/.bg-btn-white:hover { color:#2bb5e3; background:#fff; }
Large button white
Button preview
Css to copy
/*--Rest--*/.lg-btn-white { text-decoration:none; padding:12px 72px; font-size:20px; text-transform:uppercase; border:3px solid #fff; color:#fff; display:inline-block; font-weight:700; transition:all .2s ease-out; }/*--Hover--*/.lg-btn-white:hover { color:#2bb5e3; background:#fff; }

Gradient Buttons
Huge button Red gradient
Button preview
Css to copy
/*--Rest--*/.hg-gred-btn { box-shadow: 0 0 0 rgba(255, 102, 0, 0.4); position:relative; text-decoration:none; font-size:25px; color:#fff; display:inline-block; font-weight:700; text-transform:uppercase; padding:29px 52px; border: solid 5px transparent; background: transparent linear-gradient(90deg, #FF6600 0%, #ED1E79 100%) 0% 0% no-repeat padding-box; transition:all .2s ease-out; }.hg-gred-btn:before { position:absolute; z-index:-1; content:""; top:-5px; right:-5px; left:-5px; bottom:-5px; background:transparent linear-gradient(90deg, #FF6600 0%, #ED1E79 100%) 0% 0% no-repeat padding-box; transition:all .2s ease-out; }/*--Hover--*/.hg-gred-btn:hover { animation: pulseRed 1s; background: transparent linear-gradient(117deg, rgba(255, 102, 0, .8) 0%, rgba(237, 30, 121, .8) 100%) 0% 0% no-repeat padding-box; }.hg-gred-btn:hover:before { background: transparent linear-gradient(117deg, rgba(255, 102, 0, .8) 0%, rgba(237, 30, 121, .8) 100%) 0% 0% no-repeat padding-box; }
Big button Red gradient
Button preview
Css to copy
/*--Rest--*/.bg-gred-btn { box-shadow: 0 0 0 rgba(255, 102, 0, 0.4); position:relative; text-decoration:none; font-size:25px; color:#fff; display:inline-block; font-weight:700; text-transform:uppercase; padding:18px 52px; border: solid 4px transparent; background: transparent linear-gradient(90deg, #FF6600 0%, #ED1E79 100%) 0% 0% no-repeat padding-box; transition:all .2s ease-out; }.bg-gred-btn:before { position:absolute; z-index:-1; content:""; top:-4px; right:-4px; left:-4px; bottom:-4px; background:transparent linear-gradient(90deg, #FF6600 0%, #ED1E79 100%) 0% 0% no-repeat padding-box; transition:all .2s ease-out; }/*--Hover--*/.bg-gred-btn:hover { animation: pulseRed 1s; background: transparent linear-gradient(117deg, rgba(255, 102, 0, .8) 0%, rgba(237, 30, 121, .8) 100%) 0% 0% no-repeat padding-box; }.bg-gred-btn:hover:before { background: transparent linear-gradient(117deg, rgba(255, 102, 0, .8) 0%, rgba(237, 30, 121, .8) 100%) 0% 0% no-repeat padding-box; }
Large button Red gradient
Button preview
Css to copy
/*--Rest--*/.lg-gred-btn { box-shadow: 0 0 0 rgba(255, 102, 0, 0.4); position:relative; text-decoration:none; font-size:20px; color:#fff; display:inline-block; font-weight:700; text-transform:uppercase; padding:12px 72px; border: solid 3px transparent; background: transparent linear-gradient(90deg, #FF6600 0%, #ED1E79 100%) 0% 0% no-repeat padding-box; transition:all .2s ease-out; }.lg-gred-btn:before { position:absolute; z-index:-1; content:""; top:-3px; right:-3px; left:-3px; bottom:-3px; background:transparent linear-gradient(90deg, #FF6600 0%, #ED1E79 100%) 0% 0% no-repeat padding-box; transition:all .2s ease-out; }/*--Hover--*/.lg-gred-btn:hover { animation: pulseRed 1s; background: transparent linear-gradient(117deg, rgba(255, 102, 0, .8) 0%, rgba(237, 30, 121, .8) 100%) 0% 0% no-repeat padding-box; }.lg-gred-btn:hover:before { background: transparent linear-gradient(117deg, rgba(255, 102, 0, .8) 0%, rgba(237, 30, 121, .8) 100%) 0% 0% no-repeat padding-box; }
Huge button Blue Gradient
Button preview
Css to copy
/*--Rest--*/.hg-gblue-btn { box-shadow: 0 0 0 rgba(0, 186, 237, 0.4); position:relative; text-decoration:none; font-size:25px; color:#fff; display:inline-block; font-weight:700; text-transform:uppercase; padding:29px 52px; border: solid 5px transparent; background: transparent linear-gradient(90deg, #1CB5E6 0%, #2A9A64 100%) 0% 0% no-repeat padding-box; transition:all .2s ease-out; }.hg-gblue-btn:before { position:absolute; z-index:-1; content:""; top:-5px; right:-5px; left:-5px; bottom:-5px; background: transparent linear-gradient(90deg, #1CB5E6 0%, #2A9A64 100%) 0% 0% no-repeat padding-box; transition:all .2s ease-out; }/*--Hover--*/.hg-gblue-btn:hover { animation: pulseBlue 1s; background: transparent linear-gradient(117deg, rgba(0, 186, 237, .8) 0%, rgba(45, 164, 108, .8) 100%) 0% 0% no-repeat padding-box;  }.hg-gblue-btn:hover:before { background: transparent linear-gradient(117deg, rgba(0, 186, 237, .8) 0%, rgba(45, 164, 108, .8) 100%) 0% 0% no-repeat padding-box; }
Big button Blue Gradient
Button preview
Css to copy
/*--Rest--*/.bg-gblue-btn { box-shadow: 0 0 0 rgba(0, 186, 237, 0.4); position:relative; text-decoration:none; font-size:25px; color:#fff; display:inline-block; font-weight:700; text-transform:uppercase; padding:18px 52px; border: solid 4px transparent; background: transparent linear-gradient(90deg, #1CB5E6 0%, #2A9A64 100%) 0% 0% no-repeat padding-box; transition:all .2s ease-out; }.bg-gblue-btn:before { position:absolute; z-index:-1; content:""; top:-4px; right:-4px; left:-4px; bottom:-4px; background: transparent linear-gradient(90deg, #1CB5E6 0%, #2A9A64 100%) 0% 0% no-repeat padding-box; transition:all .2s ease-out; }/*--Hover--*/.bg-gblue-btn:hover { animation: pulseBlue 1s; background: transparent linear-gradient(117deg, rgba(0, 186, 237, .8) 0%, rgba(45, 164, 108, .8) 100%) 0% 0% no-repeat padding-box;  }.bg-gblue-btn:hover:before { background: transparent linear-gradient(117deg, rgba(0, 186, 237, .8) 0%, rgba(45, 164, 108, .8) 100%) 0% 0% no-repeat padding-box; }
Large button Blue Gradient
Button preview
Css to copy
/*--Rest--*/.lg-gblue-btn { box-shadow: 0 0 0 rgba(0, 186, 237, 0.4); position:relative; text-decoration:none; font-size:20px; color:#fff; display:inline-block; font-weight:700; text-transform:uppercase; padding:12px 72px; border: solid 3px transparent; background: transparent linear-gradient(90deg, #1CB5E6 0%, #2A9A64 100%) 0% 0% no-repeat padding-box; transition:all .2s ease-out; }.lg-gblue-btn:before { position:absolute; z-index:-1; content:""; top:-3px; right:-3px; left:-3px; bottom:-3px; background: transparent linear-gradient(90deg, #1CB5E6 0%, #2A9A64 100%) 0% 0% no-repeat padding-box; }/*--Hover--*/.lg-gblue-btn:hover { animation: pulseBlue 1s; background: transparent linear-gradient(117deg, rgba(0, 186, 237, .8) 0%, rgba(45, 164, 108, .8) 100%) 0% 0% no-repeat padding-box;  }.lg-gblue-btn:hover:before { background: transparent linear-gradient(117deg, rgba(0, 186, 237, .8) 0%, rgba(45, 164, 108, .8) 100%) 0% 0% no-repeat padding-box; }
Huge Dark button pulse
Button preview
Css to copy
/*--Rest--*/.hg-dark-btn { box-shadow: 0 0 0 rgba(0, 0, 0, 0.4); position:relative; text-decoration:none; font-size:25px; color:#fff; display:inline-block; font-weight:700; text-transform:uppercase; padding:29px 52px; border: solid 5px transparent; background: #000; transition:all .2s ease-out; }.hg-dark-btn:before { position:absolute; z-index:-1; content:""; top:-5px; right:-5px; left:-5px; bottom:-5px; background:#000; }/*--Hover--*/.hg-dark-btn:hover { animation: pulseDark 1s; background: rgba(56, 56, 56, 1) 0% 0% no-repeat padding-box; }.hg-dark-btn:hover:before { background: rgba(56, 56, 56, 1) 0% 0% no-repeat padding-box; }
Big Dark button pulse
Button preview
Css to copy
/*--Rest--*/.bg-dark-btn { box-shadow: 0 0 0 rgba(0, 0, 0, 0.4); position:relative; text-decoration:none; font-size:25px; color:#fff; display:inline-block; font-weight:700; text-transform:uppercase; padding:18px 52px; border: solid 4px transparent; background: #000; transition:all .2s ease-out; }.bg-dark-btn:before { position:absolute; z-index:-1; content:""; top:-4px; right:-4px; left:-4px; bottom:-4px; background:#000; }/*--Hover--*/.bg-dark-btn:hover { animation: pulseDark 1s; background: rgba(56, 56, 56, 1) 0% 0% no-repeat padding-box; }.bg-dark-btn:hover:before { background: rgba(56, 56, 56, 1) 0% 0% no-repeat padding-box; }
Large Dark button pulse
Button preview
Css to copy
/*--Rest--*/.lg-dark-btn { box-shadow: 0 0 0 rgba(0, 0, 0, 0.4); position:relative; text-decoration:none; font-size:20px; color:#fff; display:inline-block; font-weight:700; text-transform:uppercase; padding:12px 72px; border: solid 3px transparent; background: #000; transition:all .2s ease-out; }.lg-dark-btn:before { position:absolute; z-index:-1; content:""; top:-3px; right:-3px; left:-3px; bottom:-3px; background:#000; }/*--Hover--*/.lg-dark-btn:hover { animation: pulseDark 1s; background: rgba(56, 56, 56, 1) 0% 0% no-repeat padding-box; color: #fff !important; text-decoration: none !important; }.lg-dark-btn:hover:before { background: rgba(56, 56, 56, 1) 0% 0% no-repeat padding-box; }

Text buttons
Text blue button
Button preview
Css to copy
/*--Rest--*/.sp-blue-btn { font-size:17px; font-weight:700; color:#000; text-transform:uppercase; text-decoration:none; border-bottom:3px solid #000; padding-bottom:4px; transition:all .2s ease-out;}/*--Hover--*/.sp-blue-btn:hover { color:#2BB5E3; border-color:#2BB5E3; }
Text orange button
Button preview
Css to copy
/*--Rest--*/.sp-orange-btn { font-size:17px; font-weight:700; color:#000; text-transform:uppercase; text-decoration:none; border-bottom:3px solid #000; padding-bottom:4px; transition:all .2s ease-out;  }/*--Hover--*/.sp-orange-btn:hover { color:#FF6600; border-color:#FF6600; }
Text white button blue
Button preview
Css to copy
/*--Rest--*/.sp-blue-btn-white { font-size:17px; font-weight:700; color:#fff; text-transform:uppercase; text-decoration:none; border-bottom:3px solid #fff; padding-bottom:4px; transition:all .2s ease-out;}/*--Hover--*/.sp-blue-btn-white:hover { color:#2BB5E3; border-color:#2BB5E3; }
Text white button orange
Button preview
Css to copy
/*--Rest--*/.sp-orange-btn-white { font-size:17px; font-weight:700; color:#fff; text-transform:uppercase; text-decoration:none; border-bottom:3px solid #fff; padding-bottom:4px; transition:all .2s ease-out;  }/*--Hover--*/.sp-orange-btn-white:hover { color:#FF6600; border-color:#FF6600; }