Skip to main content
Closed for Voting

Buttons in articles

Related products:Freshdesk
  • July 7, 2020
  • 3 replies
  • 27 views
M
Contributor

Any way to add buttons to articles? Right now I'm using images, but this also means that if I have to change the style of the knowledge base, I have to redo all those images, instead of change the styling in one go in the CSS.


I could use the <h> tags, but in that case it would be helpful if there were more than 4 available.

Basically for me it's already 3, as accessibility asks for the use of only 1 <h1> and we would like to stay accessable for visualy impaired users. The title of the article would be <h1>, <h2> is used for subjects in the article, which only leaves 2 <h> tags for other use.

3 replies

S
Contributor

same question i want to ask. if you get any best answers please inform me as well. 

M
Contributor
  • merel.brok
  • Author
  • Contributor
  • July 14, 2020

@Muhammad Usman

Yeah, I found a solution. Using the h tags wasn't a great idea, but I got my buttons to work anyway.

I first tried:

 <button type="button" class="block">Block Button</button>


But that didn't work, as the block class can't be used in the editor. So I tried to look for other ways and used the h tags. But honestly, the h tags are meant to be used differently, so that wasn't an actual viable solution. But seeing that I was using the buttons for links anyway (I mean, what other reason would there be for a button?), I could create a class that could be added to the <a>. So here you go:


Added this to the CSS (This is my buttons style, change it to suit your own): 

.button1 {
  border: none;
  width: 45%;
  padding: 3px;
  min-width: 291px;
  color: white;
  background-color: rgb(255, 76, 46);
  font-weight: bold;
  font-family: Helvetica, sans-serif;
  font-size: 12px;
  padding-left: 10px;
  text-align: left;
  display: block;
  margin: 4px 50px;
  cursor: pointer;
  line-height: 18px;
}


a.button1:hover, a.button1:active, a.button1:visited {
  color: white;
  font-weight: bold;
  font-family: Helvetica, sans-serif;
  font-size: 12px;
  text-decoration: none;
}

And have this in the html:

<a class="button1" href="[link]">[Text on button]</a>

You do need Garden, Estate or Forest for it though!

M
Contributor
  • merel.brok
  • Author
  • Contributor
  • September 18, 2020

 Quick update!


I changed a bit of the CSS to allow for better accessibility. I removed the

 

a.button1:hover,

 

from the second bit and added

 

a.button1:focus, a.button1:hover{
}

 

 with a styling that had a visual difference from the normal styling of the button. Make sure the visual difference is not just a change in colour!

Terms of UseAccessibility statement