Hi Everyone - I've been trying for a while to convert a link field to appear as a button in a List view and followed a few threads that relate to much more complicated use cases and can't seem to parse through it to get the very simple and easy solution I need.
I feel like I'm missing a very simple solution to this and can't seem to figure it out.
Ah! I see that now and think I understand how this all works, this has been a very instructive lesson in CSS thank you so much for your help.
Ok that's great progress !! well done!!
The text in the button is an "a" element so you need to ALSO target this so ADD this css
Please note the a just before the {
.field_170 .kn-detail-body a {
text-align: center;
text-decoration: none !important;
color: white;
padding:6px 24px;
}
Below is what this looks like for me
Note there is probably redundant CSS in the original CSS .field_397 .kn-detail-body (my bad :-( )
Anything related to formatting the text content should ideally be moved to the css for the "a" tag
Any way congrats ..... once you do a few of these you'll be hooked :-)
Very helpful resources! So I've got it almost working exactly how I want, with a few issues.
Here is my CSS
.field_397 .kn-detail-body {
box-shadow:inset 0px 1px 0px 0px #d9fbbe;
background: rgb(114,217,255);
background: linear-gradient(171deg, rgba(127,147,68,1) 0%, rgba(114,217,255,1) 0%, rgba(114,217,255,1) 100%);
border-radius:6px;
border:1px solid rgb(114,217,255);
display:inline-block;
cursor:pointer;
font-family:Open Sans;
font-size:15px;
font-weight:700;
text-align: center;
text-decoration: none;
color: white;
padding:6px 24px;
text-decoration:none;
}
and I end up with this button:
The text is not quite centered, and I'd like to have the font color as white with no underline. From what I've read on the link you shared, I have the correct CSS attributes set but it is still setting the font to be blue and underline. Can you tell what I'm doing wrong?
Hi Zak,
Ok that's a little more difficult. Have you figured out how to find the css selector in your apps web page?
see here
https://www.knack.com/developer-documentation/#types-of-css-selectors
These are essentially identifiers for each element of your knack web page.... you need to find the identifier (or selector) for the link you want to make a button off and then in your Knack CSS tell it to apply the CSS the that selector
In summary, load the page with the list view in your browser and you need to right-click on the link you want to make a button off and select inspect.
A window will open with all the CSS and as you highlight different elements on your page you will see the corresponding CSS.
In my case it was field_170
So I added this css to the css window in my knack app to change a link I had to a button
.field_170 .kn-detail-body {
box-shadow:inset 0px 1px 0px 0px #d9fbbe;
background: rgb(127,147,68);
background: linear-gradient(171deg, rgba(127,147,68,1) 0%, rgba(159,179,102,1) 0%, rgba(203,218,156,1) 100%);
border-radius:24px;
border:1px solid rgb(127,147,68);
display:inline-block;
cursor:pointer;
color: white !important;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #86ae47;
}
Save this and reload the view and you should see a green button surrounding the link.
(you should substitute your button css between { } ...but try mine first to reduce other possible issues )
You probably do not want the actual link text in the button, so go back to the Data object and open the field and make these changes
Change CLICK HERE to whatever you want the button to say
Here is my button link 
(all dummy data)
Hope this helps.
In order to make customizations like this you need to get good at finding the right selector which can be fun and you need to know the css to apply.
I used a cheap chrome plugin called hoverify to help me identify the right selector and play with css before applying to css in Knack.
W3Schools is a super web site to learn the basic css and selector stuff
https://www.w3schools.com/cssref/css_selectors.asp
Hope this helps
regards
Noel
Noel thanks so much. I know it's an easy one and I've searched the community but haven't been able to find it.
I've added the CSS, however step 2 of your instructions look like it's for applying the CSS to a table view. I'm looking to apply to to a List view. How would I change that?
This is not that hard to do.
You need to create a button class and add it to your CSS tab in knack - do you know how to add css ?
https://www.w3schools.com/css/css3_buttons.asp. you could play around with this and get the look of your button.
Here is one I use
.redButton {
box-shadow:inset 0px 1px 0px 0px #d9fbbe;
background: rgb(127,147,68);
background: linear-gradient(171deg, rgba(127,147,68,1) 0%, rgba(159,179,102,1) 0%, rgba(203,218,156,1) 100%);
border-radius:6px;
border:1px solid rgb(127,147,68);
display:inline-block;
cursor:pointer;
color: white !important;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #86ae47;
}
You then need to apply this in your builder as per below
If this doesn't make sense let me know
tks
Noel