1/* Button
2---------------------- */
3a.taq-button{
4 border: none;
5 cursor: pointer;
6 padding: 0 15px 0 60px;
7 display: inline-block;
8 margin: 10px 0 0;
9 text-transform: uppercase;
10 letter-spacing: 1px;
11 font-weight: 700;
12 outline: none;
13 position: relative;
14
-webkit-transition: all 0.3s;
15
-moz-transition: all 0.3s;
16 transition: all 0.3s;
17 background: #c7c7c7;
18 color: #fff !important;
19 text-decoration: none !important;
20
font-size: 14px;
21 height: 45px;
22 line-height: 45px;
23 opacity: .9;
24 overflow: hidden;
25}
26a.taq-button.without-icon{padding: 0 15px !important;}
27a.taq-button:hover{ opacity: 1; }
28a.taq-button i{
29 background: rgba(0,0,0,0.07);
30 position: absolute;
31 height: 100%;
32 left: 0;
33 top: 0;
34 line-height: 45px;
35 width: 45px;
36 text-align: center;
37}
38
39/* Button Types
40---------------------- */
41a.taq-gradient{
42 background-image: -webkit-linear-gradient(bottom,rgba(0,0,0,0.3) 0, rgba(0,0,0,0) 100%);
43 background-image: -moz-linear-gradient(bottom,rgba(0,0,0,0.3) 0, rgba(0,0,0,0) 100%);
44 background-image: -ms-linear-gradient(bottom,rgba(0,0,0,0.3) 0, rgba(0,0,0,0) 100%);
45 background-image: -o-linear-gradient(bottom,rgba(0,0,0,0.3) 0, rgba(0,0,0,0) 100%);
46 background-image: linear-gradient(to top,rgba(0,0,0,0.3) 0, rgba(0,0,0,0) 100%);
47}
48
49/* Button Size
50---------------------- */
51/* LARGE BUTTON */
52a.taq-button.taq-large{
53 font-size: 24px;
54 height: 65px;
55 line-height: 65px;
56 padding: 0 20px 0 80px;
57}
58a.taq-button.taq-large.without-icon{padding: 0 20px !important;}
59a.taq-button.taq-large i{
60 line-height: 65px;
61 width: 65px;
62}
63/* SMALL BUTTON */
64a.taq-button.taq-small{
65
font-size: 10px;
66 height: 25px;
67 line-height: 25px;
68 padding: 0 10px 0 35px;
69}
70a.taq-button.taq-small.without-icon{padding: 0 10px !important;}
71a.taq-button.taq-small i{
72 line-height: 25px;
73 width: 25px;
74}
75
76/* Button Shape
77---------------------- */
78a.taq-round{
79
-webkit-border-radius: 5px;
80 border-radius: 5px;
81}
82a.taq-pill{
83
-webkit-border-radius: 200px;
84 border-radius: 200px;
85}
86
87/* RTL
88---------------------- */
89body.rtl a.taq-button i {
90 left: auto;
91 right: 0;
92}
93body.rtl a.taq-button {
94 padding: 0 60px 0 15px;
95}
96body.rtl a.taq-button.taq-large{
97 padding: 0 80px 0 20px;
98}
99body.rtl a.taq-button.taq-small{
100 padding: 0 35px 0 10px;
101}
102
103/* Button Back-end ========================================= */
104#taq-button-wrapper{ display: none; }
105#taq-button-colour{margin: 0; display: table;}
106#taq-button-colour li {
107 margin: 0 3px 3px 0;
108 float: left;
109}
110#taq-button-colour li input{
111 display: none;
112}
113#taq-button-colour a {
114 text-decoration: none;
115 color: #FFF;
116}
117#taq-button-colour a span {
118 padding: 0 8px;
119 display: block;
120 height: 25px;
121 line-height: 25px;
122}
123#taq-button-preview{
124 text-align: center;
125 margin: 10px 0;
126}
127#taq-button-icons{
128 height: 250px;
129 overflow-y: scroll;
130 background: #fafafa;
131 border: 1px solid #eee;
132 padding: 10px;
133 clear: both;
134 margin-top: 10px;
135}
136#taq-button-icons li{
137 margin: 0;
138 list-style: none;
139 display: inline;
140}
141#taq-button-icons li a{
142 font-size: 0;
143 background: #FFF;
144 margin: 2px;
145 float: left;
146 width: 4%;
147 padding: 5px 5px 0 5px;
148 text-align: center;
149 line-height: 4%;
150 display: block;
151 border: 1px solid #e5e5e5;
152
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.04);
153 box-shadow: 0 1px 1px rgba(0,0,0,.04);
154 color: #888;
155}
156#taq-button-icons li a.active{
157 color:#0074a2 !important;
158 box-shadow: inset 0 0 0 3px #0074a2;
159}
160#taq-button-icons li a:hover{ color: #333;}
161#taq-button-icons li a i {
162 font-size: 16px;
163 line-height: 2;
164}
165#taq-button-icons li a i.none:before {
166 content: '.';
167 color: #FFF;
168}
169/* RTL
170---------------------- */
171body.rtl #taq-button-colour li {
172 margin: 0 0 3px 3px;
173 float: right;
174}
175body.rtl #taq-button-icons li a{
176 float: right;
177}