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.
<button>Hover Me!</button>
Hover Me!
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
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);
}
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>).
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.
Related
I try to implement a carousel with buttons to go back and forth. When I press the buttons on my pc there is no problem but once I press them on my phone the background-color turns gray.
image
Neither in my CSS nor in my HTML is a background-color which could interfere…
.prev-screen,
.next-screen {
align-self: stretch;
background: none;
border: 0;
margin-top: 40px;
color: rgba(#000, 0.25);
cursor: pointer;
font-size: 24px;
opacity: 1;
outline: none;
padding: 16px;
transform: scale(1);
z-index: 1000;
&:hover,
&:active {
color: #000;
transform-origin: center;
transform: scale(1.25);
}
&:disabled {
opacity: 0;
}
}
What could lead to that black background?
The CSS you provided doesn't describe exactly what you have written to change the background color. What code have you wrote to add the active class to the background? Either way, it might be because of the event listener you have set up to alter css properties... if it works on pc and not on mobile... this might help you out?, or at least guide you on your way... On click event for mobile?.
Hello :) I have added a little underline animation to my bootstrap menu here: http://webserver-meetandengage-com.m11e.net so on hover, it draws the underline from the centre. Heres the CSS I used to achieve this:
/* ---------------------- Animated hover --------------------- */
.navbar-light .navbar-nav .nav-link {
position: relative;
text-decoration: none;
}
.navbar-light .navbar-nav .nav-link:before {
content: "";
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
left: 0;
background-color: #FEB700;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.navbar-light .navbar-nav .nav-link:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
/* ----------------------------------- */
As you will see, the last item in the list, Control Panel, I have added a padlock icon before it using the: li:last-of-type:before selector like so:
.navbar li:last-of-type:before {
font-family: FontAwesome;
content: "\F023";
float: left;
margin-top: 8px;
}
.navbar li:nth-last-child(2) {
margin-right: 15px;
}
Because of this icon, the underline animation is not centres to the button, and appears to stick out more on the right.
I can fix this by adjusting the width:; and the left:; but this of course effects all other underlines in the menu.
Im trying to combine the two I guess so I can target the last .nav-link item and apply a slightly different set of rules to the width:; and the left:; selectors... But I'm stuck and everything I have tried doesn't seem to be working.
Can anyone shed some light on the situation? is this correct or is there a better way to approach this? Thanks for reading!:)
You can add Font Awesome icons in HTML without the CSS magic like this:
<i class="fa fa-fw fa-lock"></i>
Some people use the <em> tag or something else, I like <i> more ...
You can place Font Awesome icons just about anywhere using the CSS Prefix fa and the icon's name. Font Awesome is designed to be used with inline elements (we like the <i> tag for brevity, but using a <span> is more semantically correct).
See Font Awesome documentation.
While messing around with the code I found that this
.navbar li:last-of-type a:before {
left: -6px;
}
edit
li#menu-item-750 a:before {
left: -6px;
}
Seemed to achieve a fix to your issue, as it's targeting the before on the last li entry, it should do the job
I have a series of round images that are part of an image gallery. I’ve added an overlay and positioned the text in the location that I want, but now the overlay is removing the URL link to the image, and I'm trying to get the overlay to retain the link.
I’m working with a SquareSpace template so I can’t move any of the blocks around as they are rendered by CMS.
The text is in this here: .image-slide-title, and the image is here: .thumb-image .loaded, and the link has these classes: image-slide-anchor .content-fit
This is the page I'm working on: https://cesare-asaro.squarespace.com/work
And this is the code that I have so far for this particular section:
#portfolio {
background-repeat: repeat;
background-color: rgba(239,93,85,1);
}
.margin-wrapper:hover { //for portfolio hovers
position: relative;
}
.margin-wrapper:hover a:after {
opacity:.8;
}
.margin-wrapper a:after {
border-radius: 50%;
content: '\A';
position: absolute;
width: 100%; height:100%;
top:0; left:0;
background:rgba(255,255,255,0.8);
opacity: 0;
transform: scale(1.002)
margin: 0 -50% 0 0;
transition: all .7s;
-webkit-transition: all .7s;
}
.sqs-gallery-container{
overflow: visible;
}
.margin-wrapper:hover .image-slide-title{
opacity:1;
color: rgba(239,93,85,1);
-webkit-transition: all .7s;
}
.image-slide-title{
font-size: 50px;
text-transform: uppercase;
line-height: 100%;
opacity:0;
position: absolute;
margin: -100% 0;
height:100%;
width: 100;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
white-space: normal;
}
I’m getting quite confused by the different approaches, some with JS some without, and the multiple uses of :after and :hover (I just tinker a bit with code).
Your overlay is probably blocking the click event to the thing below it, preventing it from triggering the link.
Just add pointer-events: none to the overlay. This will make it not capture the click, allowing it to fall to the element below it.
I'm using a CSS hover effect on buttons and menu-links. The links work fine because they are anchor tags, while the buttons do not work since they are used in forms as input[type=submit].
The HTML:
<div class="submit">
<span data-hover="Send">
<input type="submit" value="Send">
</span>
</div>
The .submit-wrapper class is used for decoration (as seen in the CSS below), while the span applies the actual hover effect.
The CSS:
.submit /* Need this to hide the second text -- otherwise it will show beneath */ {
overflow: hidden;
}
.submit > span {
position: relative;
display: block;
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
transition: transform 0.3s;
}
.submit > span::before /* The effect in place */ {
padding-top: 49px;
content: attr(data-hover);
position: absolute;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
left: 28px;
top: 0;
letter-spacing: normal;
}
.submit:hover > span, .submit:focus > span /* The actual effect on hover */ {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
transform: translateY(-100%);
}
Here's the problem: I cannot click on the button. It shows the default cursor and completely ignores the fact that it's a button (an input submit type). So I have two questions:
1. Is it possible to use an anchor tag instead of an input type="submit"?
2. If not, how do I make the input type="submit" clickable?
For me, when I put that into jsfiddle, I can't click the button because your translate is moving it offscreen. When I remove that I can click the button just fine.
Otherwise, you can use a link that has jQuery attached to it so when it's clicked, submit the form. see http://api.jquery.com/submit/
Here is the site I'm working on: revistapuerto
It's a Wordpress based site. What I'm trying to achieve through CSS, is to get the excerpt to appear over the picture when you hover over the Title of the post. Right now, the excerpt appears when you hover over the picture only. Want to keep that effect, and add the Title thing.
The picture - excerpt effect I got it from another user here, and here is the CSS in case it helps:
#magia {
position: relative;
}
#magia img {
display: block;
}
#magia .cornerLink {
width:494px;
height:330px;
opacity: 0;
position: absolute;
top: 32px;
left: 0px;
right: 0px;
padding: 0px 0px;
background-color: rgba(0,0,0,0.50);
text-decoration: none;
text-align: center;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
#magia:hover .cornerLink {
opacity: 1.0;
}
Thanks!
Honestly the question isn't very clear, you're gonna need to give more information. All I can really offer in regards to what you've asked is basic fiddle: http://jsfiddle.net/MBLZx/
HTML:
<div class="showhim">HOVER ME
<div class="showme">hai</div>
<div class="ok">ok</div>
</div>
CSS:
.showme{
display: none;
}
.showhim:hover .showme{
display : block;
}
.showhim:hover .ok{
display : none;
}
(also the website won't load for me, could just be my work computer!)
that shows how to use hidden divs to make divs appear using a hover.
More information and I might be able to help you out :)
If I understood what you want, here's how you can achieve it.
#div-for-hover:hover #Div-you-want-to-show {
display: block;
}
The method is simple: The block of CSS code simply says when you hover of #div-for-hover, I'll show #Div-you-want-to-show
Note: The hover could be on a headings, DIVs, images, and more.