Instantly share code, notes, and snippets.
Created
May 17, 2017 08:05
-
Star
(1)
1
You must be signed in to star a gist -
Fork
(0)
0
You must be signed in to fork a gist
-
Save psahalot/df3128c139dc037f89d2667c0ac8772c to your computer and use it in GitHub Desktop.
Beaver Builder Button Styles
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .bb-custom-button-1 { | |
| letter-spacing: 2px; | |
| } | |
| .bb-custom-button-1 a.fl-button { | |
| border-width: 3px !important; | |
| } | |
| .bb-custom-button-1 a.fl-button:hover { | |
| background-color: transparent !important; | |
| } | |
| .bb-custom-button-2 { | |
| letter-spacing: 2px; | |
| } | |
| .bb-custom-button-3 { | |
| letter-spacing: 2px; | |
| } | |
| .bb-custom-button-3 a.fl-button { | |
| border-width: 3px !important; | |
| } | |
| .bb-custom-button-3 a.fl-button:hover { | |
| background-color: #2bb673 !important; | |
| } | |
| .bb-custom-button-4 { | |
| letter-spacing: 2px; | |
| } | |
| .bb-custom-button-4 a.fl-button { | |
| border-width: 3px !important; | |
| padding-left: 20px !important; | |
| padding-right: 20px !important; | |
| } | |
| .bb-custom-button-4 a.fl-button:hover { | |
| background-color: #a8c336 !important; | |
| } | |
| .bb-custom-button-5 { | |
| letter-spacing: 2px; | |
| } | |
| .bb-custom-button-5 a.fl-button { | |
| padding: 5px !important; | |
| display: inline-block; | |
| } | |
| .bb-custom-button-5 a.fl-button span { | |
| border: 1px solid #fff; | |
| padding: 12px 30px; | |
| display: block; | |
| } | |
| .bb-custom-button-5 a.fl-button:hover span { | |
| border-color: #965ea7; | |
| } | |
| .bb-custom-button-6 { | |
| letter-spacing: 2px; | |
| } | |
| .bb-custom-button-6 a.fl-button { | |
| border-left-color: transparent !important; | |
| border-right-color: transparent !important; | |
| border-top-color: transparent !important; | |
| } | |
| .bb-custom-button-6 a.fl-button:hover { | |
| border-left-color: #745dc5 !important; | |
| border-right-color: #745dc5 !important; | |
| border-top-color: #745dc5 !important; | |
| } | |
| .bb-custom-button-7 { | |
| letter-spacing: 2px; | |
| } | |
| .bb-custom-button-7 a.fl-button { | |
| border-width: 3px !important; | |
| } | |
| .bb-custom-button-7 a.fl-button:hover { | |
| background-color: transparent !important; | |
| border-left-color: transparent !important; | |
| border-right-color: transparent !important; | |
| border-top-color: transparent !important; | |
| } | |
| .bb-custom-button-8 { | |
| letter-spacing: 2px; | |
| } | |
| .bb-custom-button-8 a.fl-button { | |
| border-width: 3px !important; | |
| } | |
| .bb-custom-button-8 a.fl-button:hover { | |
| background-color: transparent !important; | |
| } | |
| .bb-custom-button-9 { | |
| letter-spacing: 2px; | |
| } | |
| .bb-custom-button-10 { | |
| letter-spacing: 2px; | |
| } | |
| .bb-custom-button-10 a.fl-button { | |
| border-width: 3px !important; | |
| } | |
| .bb-custom-button-10 a.fl-button:hover { | |
| background-color: #2bb673 !important; | |
| } | |
| .bb-custom-button-11 { | |
| letter-spacing: 2px; | |
| } | |
| .bb-custom-button-11 a.fl-button { | |
| border-width: 3px !important; | |
| padding-left: 20px !important; | |
| padding-right: 20px !important; | |
| } | |
| .bb-custom-button-11 a.fl-button:hover { | |
| background-color: #a8c336 !important; | |
| } | |
| .bb-custom-button-12 { | |
| letter-spacing: 2px; | |
| } | |
| .bb-custom-button-12 a.fl-button { | |
| border-width: 0px !important; | |
| border-bottom-width: 3px !important; | |
| border-bottom-color: #148e75; | |
| } | |
| .bb-custom-button-12 a.fl-button:hover { | |
| border-bottom-color: transparent !important; | |
| } | |
| .bb-custom-button-13 { | |
| letter-spacing: 2px; | |
| } | |
| .bb-custom-button-13 a.fl-button { | |
| padding-right: 0 !important; | |
| padding-top: 0 !important; | |
| padding-bottom: 0 !important; | |
| padding-left: 25px !important; | |
| border-width: 0 !important; | |
| overflow: hidden; | |
| } | |
| .bb-custom-button-13 a.fl-button span { | |
| margin-right: 10px; | |
| } | |
| .bb-custom-button-13 a.fl-button .fl-button-icon { | |
| padding: 18px 12px; | |
| background-color: #616161; | |
| } | |
| .bb-custom-button-13 a.fl-button:hover .fl-button-icon { | |
| background-color: #ff9800; | |
| } | |
| .bb-custom-button-14 { | |
| letter-spacing: 2px; | |
| } | |
| .bb-custom-button-14 a.fl-button { | |
| border-width: 4px !important; | |
| border-color: transparent !important; | |
| border-bottom: 4px solid #d53d0e !important; | |
| } | |
| .bb-custom-button-14 a.fl-button:hover { | |
| background-color: transparent !important; | |
| border-color: #e14547 !important; | |
| border-bottom: 4px solid #e14547 !important; | |
| } | |
| .bb-custom-button-15 { | |
| letter-spacing: 2px; | |
| } | |
| .bb-custom-button-15 a.fl-button { | |
| border-width: 0px !important; | |
| padding: 0 !important; | |
| overflow: hidden; | |
| } | |
| .bb-custom-button-15 a.fl-button:hover { | |
| border-color: #df3668 !important; | |
| } | |
| .bb-custom-button-15 a.fl-button span { | |
| padding: 16px 24px; | |
| border-bottom: 4px solid #df3668 !important; | |
| display: inline-block; | |
| } | |
| .bb-custom-button-15 a.fl-button .fl-button-icon { | |
| padding: 16px 20px; | |
| background-color: #616161; | |
| border-bottom: 4px solid #565050 !important; | |
| margin-left: -6px; | |
| } | |
| .bb-custom-button-15 a.fl-button:hover .fl-button-icon { | |
| background-color: transparent; | |
| border-bottom-color: #df3668 !important; | |
| } | |
| .bb-custom-button-16 { | |
| letter-spacing: 2px; | |
| } | |
| .bb-custom-button-16 a.fl-button { | |
| border-width: 3px !important; | |
| } | |
| .bb-custom-button-16 a.fl-button:hover { | |
| background-color: #2bb673 !important; | |
| box-shadow: 0px 4px 11px #a0a0a0; | |
| } | |
| .bb-custom-button-17 { | |
| letter-spacing: 2px; | |
| } | |
| .bb-custom-button-17 a.fl-button { | |
| border-width: 0 !important; | |
| } | |
| .bb-custom-button-17 a.fl-button:hover { | |
| box-shadow: 0px 4px 11px #a0a0a0; | |
| } | |
| .bb-custom-button-18 { | |
| letter-spacing: 2px; | |
| } | |
| .bb-custom-button-18 a.fl-button { | |
| box-shadow: 0px 4px 11px #a0a0a0; | |
| } | |
| .bb-custom-button-18 a.fl-button:hover { | |
| box-shadow: none; | |
| } | |
| .bb-custom-button-19 { | |
| letter-spacing: 2px; | |
| } | |
| .bb-custom-button-19 a.fl-button { | |
| border-width: 3px !important; | |
| box-shadow: 0px 4px 4px #a0a0a0; | |
| } | |
| .bb-custom-button-19 a.fl-button:hover { | |
| background-color: transparent !important; | |
| box-shadow: none; | |
| border-width: 3px !important; | |
| } | |
| .bb-custom-button-20 { | |
| letter-spacing: 2px; | |
| } | |
| .bb-custom-button-20 a.fl-button { | |
| border-width: 0px !important; | |
| box-shadow: 0px 1px 14px #848484; | |
| } | |
| .bb-custom-button-21 { | |
| letter-spacing: 2px; | |
| } | |
| .bb-custom-button-21 a.fl-button { | |
| border-width: 0px !important; | |
| padding: 0 !important; | |
| overflow: hidden; | |
| } | |
| .bb-custom-button-21 a.fl-button:hover { | |
| border-color: #df3668 !important; | |
| } | |
| .bb-custom-button-21 a.fl-button span { | |
| padding: 17px 24px; | |
| border-bottom: 4px solid #df3668 !important; | |
| display: inline-block; | |
| } | |
| .bb-custom-button-21 a.fl-button:hover span { | |
| background-color: #616161; | |
| border-color: #565050 !important; | |
| } | |
| .bb-custom-button-21 a.fl-button .fl-button-icon { | |
| padding: 16px 12px 17px; | |
| background-color: #616161; | |
| border-bottom: 4px solid #565050 !important; | |
| margin-left: -6px; | |
| } | |
| .bb-custom-button-21 a.fl-button:hover .fl-button-icon { | |
| background-color: #ff5285; | |
| border-bottom-color: #f34679 !important; | |
| } | |
| .bb-custom-button-22 { | |
| letter-spacing: 2px; | |
| } | |
| .bb-custom-button-22 a.fl-button { | |
| border-width: 0 !important; | |
| border-color: #1a2733 !important; | |
| border-bottom-width: 5px !important; | |
| } | |
| .bb-custom-button-22 a.fl-button:hover { | |
| border-color: transparent !important; | |
| } | |
| .bb-custom-button-23 { | |
| letter-spacing: 2px; | |
| } | |
| .bb-custom-button-24 { | |
| letter-spacing: 2px; | |
| } | |
| .bb-custom-button-24 a.fl-button { | |
| border-width: 3px !important; | |
| border-color: transparent !important; | |
| } | |
| .bb-custom-button-24 a.fl-button:hover { | |
| background-color: transparent !important; | |
| border-color: #ff830b !important; | |
| } | |
| .bb-custom-button-25 { | |
| letter-spacing: 2px; | |
| } | |
| .bb-custom-button-25 a.fl-button { | |
| border-width: 0 !important; | |
| background: rgb(82,214,227) !important; /* Old browsers */ | |
| background: -moz-linear-gradient(left, rgba(82,214,227,1) 0%, rgba(82,214,227,1) 43%, rgba(101,230,221,1) 71%, rgba(101,230,221,1) 100%) !important; /* FF3.6-15 */ | |
| background: -webkit-linear-gradient(left, rgba(82,214,227,1) 0%,rgba(82,214,227,1) 43%,rgba(101,230,221,1) 71%,rgba(101,230,221,1) 100%) !important; /* Chrome10-25,Safari5.1-6 */ | |
| background: linear-gradient(to right, rgba(82,214,227,1) 0%,rgba(82,214,227,1) 43%,rgba(101,230,221,1) 71%,rgba(101,230,221,1) 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#52d6e3', endColorstr='#65e6dd',GradientType=1 ) !important; | |
| } | |
| .bb-custom-button-25 a.fl-button:hover { | |
| background: #52D6E3 !important; | |
| } | |
| .bb-custom-button-26 { | |
| letter-spacing: 2px; | |
| } | |
| .bb-custom-button-26 a.fl-button { | |
| border-width: 0 !important; | |
| background: rgb(189,69,249) !important; /* Old browsers */ | |
| background: -moz-linear-gradient(top, rgba(189,69,249,1) 0%, rgba(192,68,250,1) 35%, rgba(100,84,219,1) 100%) !important; /* FF3.6-15 */ | |
| background: -webkit-linear-gradient(top, rgba(189,69,249,1) 0%,rgba(192,68,250,1) 35%,rgba(100,84,219,1) 100%) !important; /* Chrome10-25,Safari5.1-6 */ | |
| background: linear-gradient(to bottom, rgba(189,69,249,1) 0%,rgba(192,68,250,1) 35%,rgba(100,84,219,1) 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bd45f9', endColorstr='#6454db',GradientType=0 ) !important; | |
| box-shadow: 0px 1px 14px #848484; | |
| } | |
| .bb-custom-button-26 a.fl-button:hover { | |
| box-shadow: none; | |
| background: rgb(189,69,249) !important; /* Old browsers */ | |
| background: -moz-linear-gradient(top, rgba(189,69,249,1) 0%, rgba(192,68,250,1) 35%, rgba(100,84,219,1) 100%) !important; /* FF3.6-15 */ | |
| background: -webkit-linear-gradient(top, rgba(189,69,249,1) 0%,rgba(192,68,250,1) 35%,rgba(100,84,219,1) 100%) !important; /* Chrome10-25,Safari5.1-6 */ | |
| background: linear-gradient(to bottom, rgba(189,69,249,1) 0%,rgba(192,68,250,1) 35%,rgba(100,84,219,1) 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bd45f9', endColorstr='#6454db',GradientType=0 ) !important; | |
| } | |
| .bb-custom-button-27 { | |
| letter-spacing: 2px; | |
| } | |
| .bb-custom-button-27 a.fl-button { | |
| border-width: 0 !important; | |
| box-shadow: 0px 1px 14px #848484; | |
| } | |
| .bb-custom-button-27 a.fl-button:hover { | |
| box-shadow: none; | |
| } | |
| .bb-custom-button-28 { | |
| letter-spacing: 2px; | |
| } | |
| .bb-custom-button-28 a.fl-button { | |
| border-width: 0 !important; | |
| border-color: #b5c403 !important; | |
| border-bottom-width: 3px !important; | |
| } | |
| .bb-custom-button-28 a.fl-button:hover { | |
| border-color: transparent !important; | |
| } | |
| .bb-custom-button-29 { | |
| letter-spacing: 2px; | |
| } | |
| .bb-custom-button-29 a.fl-button { | |
| background: rgb(255,146,1) !important; /* Old browsers */ | |
| background: -moz-linear-gradient(left, rgba(255,146,1,1) 0%, rgba(255,146,1,1) 29%, rgba(255,121,18,1) 53%, rgba(255,121,18,1) 100%) !important; /* FF3.6-15 */ | |
| background: -webkit-linear-gradient(left, rgba(255,146,1,1) 0%,rgba(255,146,1,1) 29%,rgba(255,121,18,1) 53%,rgba(255,121,18,1) 100%) !important; /* Chrome10-25,Safari5.1-6 */ | |
| background: linear-gradient(to right, rgba(255,146,1,1) 0%,rgba(255,146,1,1) 29%,rgba(255,121,18,1) 53%,rgba(255,121,18,1) 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9201', endColorstr='#ff7912',GradientType=1 ) !important; | |
| border-width: 3px !important; | |
| border-color: transparent !important; | |
| padding-right: 0 !important; | |
| padding-top: 0 !important; | |
| padding-bottom: 0 !important; | |
| } | |
| .bb-custom-button-29 a.fl-button:hover { | |
| background: transparent !important; | |
| border-color: #ff8609 !important; | |
| } | |
| .bb-custom-button-29 a.fl-button .fl-button-icon { | |
| padding: 16px 19px 16px 24px; | |
| background: #fff; | |
| color: #FF7912; | |
| border-radius: 100%; | |
| font-size: 20px; | |
| } | |
| .bb-custom-button-29 a.fl-button:hover .fl-button-icon { | |
| background: #FF7912; | |
| color: #fff; | |
| } | |
| .bb-custom-button-30 { | |
| letter-spacing: 2px; | |
| } | |
| .bb-custom-button-30 a.fl-button { | |
| border-width: 3px !important; | |
| border-color: transparent !important; | |
| padding-left: 0 !important; | |
| padding-top: 0 !important; | |
| padding-bottom: 0 !important; | |
| } | |
| .bb-custom-button-30 a.fl-button .fl-button-icon { | |
| padding: 16px; | |
| background: #fff; | |
| color: #2bb673; | |
| border-radius: 100%; | |
| font-size: 20px; | |
| border: 2px solid #fff; | |
| } | |
| .bb-custom-button-30 a.fl-button:hover .fl-button-icon { | |
| background: transparent; | |
| color: #fff; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment