CSS for Pagination Buttons

Tagged: button, pagination

This topic has 7 replies, 2 voices, and was last updated 6 years, 11 months ago by Anonymous.

Viewing 8 posts - 1 through 8 (of 8 total)

Author
Posts
February 17, 2016 at 22:31 #7435

Anonymous
Inactive
I am trying to change the button design and button hover design but I don’t know what is the correct CSS hook. This is the CSS I tried to use:
#supsystic-table-1 input.button {
display : block;
font-family : lato;
font-size : 13px;
font-weight: 900 !important;
font-style: normal;
font-variant: normal;
color: #000000;
line-height: normal;
text-transform : uppercase;
letter-spacing : 0.3em;
background : none;
padding : 1em 4em;
border: solid 2px #000000;
margin-top : 30px;
-webkit-transition : all 0.25s ease-out;
-moz-transition : all 0.25s ease-out;
transition : all 0.25s ease-out;
}
#supsystic-table-1 input.button:hover {
border: solid 2px #7ddbc5;
background-color : #7ddbc5;
color: #ffffff;
}
Can you let me know what I am doing wrong?
Here is where the table is located on my company site http://matsui-color.com/resources/#distributors
February 18, 2016 at 15:20 #7448
mila_support
Member
Hello!
Please try this code –
```
.supsystic-tables-wrap .paginate_button {
 display : block;
 font-family : lato;
 font-size : 13px;
 font-weight: 900 !important;
 font-style: normal;
 font-variant: normal;
 color: #000000;
 line-height: normal;
 text-transform : uppercase;
 letter-spacing : 0.3em;
 background : none;
 padding : 1em 4em;
 border: solid 2px #000000;
 margin-top : 30px;
 -webkit-transition : all 0.25s ease-out;
 -moz-transition : all 0.25s ease-out;
 transition : all 0.25s ease-out;
}

.supsystic-tables-wrap .paginate_button {
 border: solid 2px #7ddbc5;
 background-color : #7ddbc5;
 color: #ffffff;
}
```
February 18, 2016 at 21:27 #7450

Anonymous
Inactive
How do you hover, active, and visited for the button?
Ex:
.supsystic-tables-wrap .paginate_button:hover
.supsystic-tables-wrap .paginate_button:active
.supsystic-tables-wrap .paginate_button:visited
February 18, 2016 at 21:33 #7451

Anonymous
Inactive
Also, this code doesn’t work when I put it in the CSS tab in table settings but it works when I put it under the Custom CSS Styling for my Morpheus Theme. Is it okay if I place it there?
February 22, 2016 at 17:48 #7544

mila_support
Member
Hello!
I’m sorry for late response.
As for the first question – try to use this code –
:hover .supsystic-tables-wrap .paginate_button:hover {
As for the second – you can use this code in the Custom CSS Styling for your Morpheus Theme – then this code will be applied to all data tables of our plugin on your site.
If you want to use only for some specific table, then use this code in css editor of the table- .supsystic-tables-wrap на supsystic-table-(replace_with_id_of_table)_wrapper
February 22, 2016 at 20:47 #7550

Anonymous
Inactive
:hover .supsystic-tables-wrap .paginate_button:hover {
This code didn’t work.
Here is where the table is located on my company site http://matsui-color.com/resources/#distributors
Even after inputting the code that you told me to put, some of the default button style still overrides my custom css.
Take a look at this link: http://matsui-color.com/resources/#general
If you look at the buttons labeled “Color Matching System” “Color Application Chart” and “Ink Application Chart”, these are how I want my buttons to look. I want the button to be transparent and have a black solid rectangle/square border with black text inside. When you hover over the button, I want the button become an aqua color and the text inside to become white.
February 26, 2016 at 23:22 #7592
mila_support
Member
Hello!
I’m sorry for late reply.
Please try this code –
```
.supsystic-tables-wrap .dataTables_wrapper a.paginate_button {
 display: inline-block;
 border-radius: 0px;
 font-family: 'lato', helvetica, arial;
 font-size : 13px;
 font-weight: 900 !important;
 font-style: normal;
 text-transform : uppercase;
 letter-spacing: 0;
 color: #000000!important;
 background : none!important;
 padding: 0.5em 1em;
 border: solid 2px #000000!important;
 margin-top : 30px;
 -webkit-transition : all 0.25s ease-out;
 -moz-transition : all 0.25s ease-out;
 transition : all 0.25s ease-out;
}
 
.supsystic-tables-wrap .dataTables_wrapper .dataTables_paginate a.paginate_button:hover,
.supsystic-tables-wrap .dataTables_wrapper .dataTables_paginate a.paginate_button.current {
 
 color: rgb(255, 255, 255)!important;
 border: 2px solid rgb(71, 211, 179)!important;
 background-color: rgb(71, 211, 179)!important;
}

.supsystic-tables-wrap .dataTables_wrapper .dataTables_paginate a.paginate_button.previous, 
.supsystic-tables-wrap .dataTables_wrapper .dataTables_paginate a.paginate_button.next, {
 letter-spacing: 3px;
}
```
February 27, 2016 at 01:21 #7595

Anonymous
Inactive
Thanks the code works great now! :)
Author
Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

CSS for Pagination Buttons

Supsystic