CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
sch
sch

Reputation: 1388

css to visualize that element is clickable (like a tab)

I want the user to see that the text is clickable. As of now I have changed cursor to a pointer, and added an underline to the text on the <span> element, I have also tried different borders and highlights on text (basically changed colors), but I was unable to make that look good.

I am using panel panel-primary from bootstrap, and I know they have have a Tabs component also, but I can not use that due to other reasons.

Simple plunker

<div class="panel panel-primary" >
    <div class="panel-heading"> SomeHeading <span style="text-decoration: underline; cursor: pointer" >Tab1</span> <span style="font-size: 8px;" class="badge">1</span> / <span style="text-decoration: underline; cursor: pointer">Tab2</span> <span style="font-size: 8px;" class="badge">3</span> 
</div> 

<div class="panel-body">
  Some content here
</div>

What more can I do to make the user understand that these are actually tabs?

Upvotes: 1

Views: 239

Answers (2)

Blubberguy22
Blubberguy22

Reputation: 1332

In addition to what Rounin said, you could also add a border:

border-style: groove; border-color: #3377ff;

See the new plunk.

EDIT: I realized he also mentioned borders.

Upvotes: 1

Rounin
Rounin

Reputation: 29501

I want the user to see that the text is clickable. As of now I have changed cursor to a pointer, and added an underline to the text on the element.

These are both pretty standard conventions. Other visual cues (usually activated on :hover) might include:

  • bolding the text with font-weight:bold
  • changing the color of the text
  • changing the background-color of the text
  • changing the border of the text

You might even:

  • give the text a text-shadow
  • give the text's containing element a box-shadow

Upvotes: 2

Related Questions