CODEWITHSUNDEEP
javascripthtmlcssreactjs
davvid09
davvid09

Reputation: 25

How to enlarge the clickable of CSS button?

I used NavLink for my route, then added some padding, and background color and etc according to the design I want. Then added a border-left style to the active css button to let user easily know where they are. But for some reason I am not able to make the border/background of my css button clickable and, the border-left is only beside of the text instead of the background. Anyone can help me with that?

Here is the css:

.tab-selections {
    background-color: rgb(242, 242, 242);
    padding: 1.4em 6em;
    height: 1.7em;
    display: inline-block;
    margin: .3em;
    vertical-align: top;
    align-items: center;
    text-align: center;
    color: rgb(75, 75, 75);
    font-size: 15px;
}

.active {
    display: inline-block;
    background-color: rgb(205, 221, 255);
    border-left: .6em solid;
    border-left-color: rgb(87, 0, 255);
    text-align: center;
}

Here is the HTML (ReactJS):

<div className="article container">
      <div className="flex container parent">
        <div className="tab-selections">
          <NavLink
            to="/sample/article"
            style={{ color: '#4b4b4b', textDecoration: 'none' }}
          >
            ARTICLES
          </NavLink>
        </div>
        <div className="tab-selections">
          <NavLink
            to="/sample/casestudies"
            style={{ color: '#4b4b4b', textDecoration: 'none' }}
          >
            CASE STUDIES /<br />
            WHITEPAPERS
          </NavLink>
        </div>
        <div className="tab-selections">
          <NavLink
            to="/sample/news"
            style={{ color: '#4b4b4b', textDecoration: 'none' }}
          >
            NEWS/EVENTS
          </NavLink>
        </div>
      </div>

Here's what the active button looked like

Here's what it should looked like

Upvotes: 1

Views: 154

Answers (3)

Ori Drori
Ori Drori

Reputation: 191976

Move className="tab-selections" to the NavLink, and remove the div that wraps the NavLink (sandbox):

<NavLink
  className="tab-selections"
  to="/sample/article"
  style={{ color: "#4b4b4b", textDecoration: "none" }}
>
  ARTICLES
</NavLink>

You should also change the styling a bit, to prevent the text from jumping by adding a transparent border to .tab-selections, and change the color when it's active:

.tab-selections {
  background-color: rgb(242, 242, 242);
  padding: 1.4em 6em;
  height: 1.7em;
  display: inline-block;
  margin: 0.3em;
  vertical-align: top;
  align-items: center;
  text-align: center;
  color: rgb(75, 75, 75);
  font-size: 15px;
  border-left: 0.6em solid;
  border-left-color: transparent;
}

.active {
  display: inline-block;
  background-color: rgb(205, 221, 255);
  border-left-color: rgb(87, 0, 255);
  text-align: center;
}

Upvotes: 2

Plastic
Plastic

Reputation: 10318

In your example code padding is used to space the container of the NAV-LINK, the solution is instead to apply the padding directly to the NAV-LINK that constitutes your "clickable surface"

so i will change:

 style={{ color: '#4b4b4b', textDecoration: 'none' }}

to:

style={{ color: '#4b4b4b', textDecoration: 'none', padding:  '1.4em 6em'}}

however consider to put it inside a css class for better handle

Upvotes: 1

Chris
Chris

Reputation: 59501

css-wise you need to move your padding rule from .tab-selections to your anchor tag. You also need your anchor to be displayed as block. Since you are using <NavLink> you can add to your inline-style:

padding: '1.4em 6em', display: 'block'

So the result becomes:

style={{ color: '#4b4b4b', textDecoration: 'none', padding: '1.4em 6em', display: 'block' }}

http://jsfiddle.net/b84nvcy0/

Upvotes: 1

Related Questions