Reputation: 534
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.
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: 2425
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
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