CODEWITHSUNDEEP
htmlcss
Ross
Ross

Reputation: 534

Creating a Link to Look Like a Button

I have a Button Element that is styled with hover the way I would like it to look. However, it was suggested to me that I should use a link and style it to look like a button in order to preserve default browser button styling.

So that Ideally the button by itself does nothing, but clicking it activates its link.

I have tried to make it a link, then a link over the element, removing span, all while changing the CSS to suit <a> but the overall styling and hover go strange.

<a href="" class="g2b-button"><button>Hover Me!</button></a>

<a href="" class="g2b-button">Hover Me!</a>

Could anybody please help shed some light on where I'm going wrong and how to make this button element a link while still looking like the button?

Thank you in advance for any suggestions.

This Is the button element.

Code Pen Link

enter image description here

Button Element

<button class="g2b-button" title=""><span>Hover me!</span></button>

CSS

.g2b-button {
  border: none;
  display: block;
  text-align: center;
  cursor: pointer;
  text-transform: uppercase;
  outline: none;
  overflow: hidden;
  position: relative;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  background-color: #A7784A;
  padding: 17px 55px;
  margin: 0 auto;
  box-shadow: 0 5px 15px rgba(0,0,0,0.20);
}

.g2b-button span {
  position: relative; 
  z-index: 1;
}

.g2b-button:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 490%;
  width: 140%;
  background: #31324E;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
  transform: translateX(-98%) translateY(-25%) rotate(45deg);
}

.g2b-button:hover:after {
  -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
  transform: translateX(-9%) translateY(-25%) rotate(45deg);
}

Upvotes: 2

Views: 2438

Answers (2)

Cutey from Cute Code
Cutey from Cute Code

Reputation: 1144

In addition to the other answers. There is also an important syntax consideration. Buttons would be used for forms or accordions or card flips, opening or closing modals and other on-page dynamics, things which do not change to a different page. Links would always be used when taking a visitor to a new page. Your post vaguely suggests linking to another page so <button> would not be good syntax.

Upvotes: 0

Isaac Corbrey
Isaac Corbrey

Reputation: 593

Just change display: block under .g2b-button to display: inline-block. This is because anchor tags (<a>) are treated different by the browser than button tags (<button>).

Upvotes: 1

Related Questions