_btn.scss 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. .boxed-btn {
  2. background: #fff;
  3. color: #DB9A64;
  4. display: inline-block;
  5. padding: 18px 44px;
  6. font-family: $font1;
  7. font-size: 14px;
  8. font-weight: 400;
  9. border: 0;
  10. border: 1px solid #DB9A64;
  11. letter-spacing: 3px;
  12. // width: 180px;
  13. text-align: center;
  14. color: #DB9A64 !important;
  15. text-transform: uppercase;
  16. cursor: pointer;
  17. &:hover{
  18. background: #DB9A64;
  19. color: #fff !important;
  20. border: 1px solid #DB9A64;
  21. }
  22. &:focus{
  23. outline: none;
  24. }
  25. &.large-width{
  26. width: 220px;
  27. }
  28. }
  29. .boxed-btn3 {
  30. /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#001D38+0,fd8e5e+100 */
  31. background: #DB9A64 ;/* IE6-9 */
  32. color: #fff;
  33. display: inline-block;
  34. padding: 19px 50px;
  35. font-family: $font1;
  36. font-size: 14px;
  37. font-weight: 500;
  38. border: 0;
  39. // border: 1px solid transparent;
  40. @include border-radius(0px);
  41. // width: 180px;
  42. text-align: center;
  43. color: #fff;
  44. text-transform: capitalize;
  45. @include transition(.3s);
  46. cursor: pointer;
  47. // letter-spacing: 2px;
  48. letter-spacing: 2px;
  49. &:hover{
  50. /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#001D38+0,fd8e5e+100 */
  51. background: #001D38 ; /* IE6-9 */
  52. color: #fff !important;
  53. // border: 1px solid #001D38;
  54. }
  55. &:focus{
  56. outline: none;
  57. }
  58. &.large-width{
  59. width: 220px;
  60. }
  61. }
  62. .boxed-btn3-white {
  63. color: #fff;
  64. display: inline-block;
  65. padding: 13px 27px;
  66. font-family: $font1;
  67. font-size: 14px;
  68. font-weight: 400;
  69. border: 0;
  70. border: 1px solid #fff;
  71. @include border-radius(5px);
  72. // width: 180px;
  73. text-align: center;
  74. color: #fff !important;
  75. text-transform: capitalize;
  76. @include transition(.5s);
  77. cursor: pointer;
  78. letter-spacing: 2px;
  79. &:hover{
  80. background: #28AE61;
  81. color: #fff !important;
  82. border: 1px solid transparent;
  83. }
  84. i{
  85. margin-right: 2px;
  86. }
  87. &:focus{
  88. outline: none;
  89. }
  90. &.large-width{
  91. width: 220px;
  92. }
  93. }
  94. .boxed-btn3-line {
  95. color: #fff !important;
  96. display: inline-block;
  97. padding: 14px 47px;
  98. font-family: $font1;
  99. font-size: 14px;
  100. font-weight: 500;
  101. border: 0;
  102. border: 1px solid #001D38;
  103. @include border-radius(0px);
  104. // width: 180px;
  105. text-align: center;
  106. text-transform: capitalize;
  107. @include transition(.5s);
  108. background: #001D38;
  109. cursor: pointer;
  110. letter-spacing: 2px;
  111. &:hover{
  112. color: #001D38 !important;
  113. border: 1px solid #001D38;
  114. /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#001D38+0,fd8e5e+100 */
  115. background: #fff;
  116. }
  117. &:focus{
  118. outline: none;
  119. }
  120. &.large-width{
  121. width: 220px;
  122. }
  123. }
  124. .boxed-btn2 {
  125. background: transparent;
  126. color: #fff;
  127. display: inline-block;
  128. padding: 18px 24px;
  129. font-family: $font1;
  130. font-size: 14px;
  131. font-weight: 400;
  132. border: 0;
  133. border: 1px solid #fff;
  134. letter-spacing: 2px;
  135. text-transform: uppercase;
  136. &:hover{
  137. background: #fff;
  138. color: #131313 !important;
  139. }
  140. &:focus{
  141. outline: none;
  142. }
  143. }
  144. .line-button{
  145. color: #919191;
  146. font-size: 16px;
  147. font-weight: 400;
  148. display: inline-block;
  149. position: relative;
  150. padding-right: 5px;
  151. padding-bottom: 2px;
  152. &::before{
  153. position: absolute;
  154. content: "";
  155. background: #919191;
  156. width: 100%;
  157. height: 1px;
  158. bottom: 0;
  159. left: 0;
  160. }
  161. &:hover{
  162. color: #009DFF;
  163. }
  164. &:hover::before{
  165. background: #009DFF;
  166. }
  167. }
  168. .book_now{
  169. display: inline-block;
  170. font-size: 14px;
  171. color: #009DFF;
  172. border: 1px solid #009DFF;
  173. text-transform: capitalize;
  174. padding: 10px 25px;
  175. &:hover{
  176. background: #009DFF;
  177. color: #fff;
  178. }
  179. }