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?.
Related
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.
I cannot figure out why this breaks it. I have an a element which uses CSS transitions to fade into a gradient background on hover. For whatever reason whenever I set the text color on hover to white the transition breaks?
.social-item {
margin-left: 0.25vw;
padding: 0.1vw;
transition: 0.2s;
color: white;
}
.social-item:hover {
background: linear-gradient(to left, #8E2DE2, #DC0486);
color: white;
}
<i class="fab fa-keybase"></i> Keybase
I'm also using Bulma and Font Awesome.
You can't simply make transitions with background gradients.
Animatable CSS Properties
Use pseudo-element and do an opacity transform.
.social-item {
position: relative;
color: white;
z-index: 1;
}
.social-item::before {
position: absolute;
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(to left, #8e2de2, #dc0486);
z-index: -1;
transition: opacity 0.5s linear;
opacity: 0;
}
.social-item:hover::before {
opacity: 1;
}
<i class="fab fa-keybase"></i> Keybase
A nice article about this.
Thank you!
What I figured your problem to be is that you're trying to do gradient transition. It is not supported. But if you want to simulate it, you can use the opacity property in css. Add opacity: 0 to the main element (.social-item) and opacity: 1 to the hover state (.social-events:hover). Hence the transition: 0.2 will apply on the opacity, as it is supported, thus simulating the desired outcome.
Thus the final css, shall be.
.social-item {
margin-left: 0.25vw;
padding: 0.1vw;
transition: 0.2s;
color: white;
opacity:0;
}
.social-item:hover {
background: linear-gradient(to left, #8E2DE2, #DC0486);
color: white;
opacity: 1;
}
If you actually want to have the thing display normally, and not just on hover, then opacity: 0 wont work for you. You have to use the pseudo-selector :after to add a dummy element to the main class and work all the transitions and background gradient stuff on that. Here is a codepen example.
This OP is aware that a simple JavaScript click event would very easily suffice as an alternative to CSS here.... But curiosity craves to be satisfied:
Using the :focus pseudo-class can we keep the pointer cursor displaying when the pseudo-class is active? Have a look.
body {
font-family: sans-serif;
}
div {
cursor: pointer; /* div should *Always* have a pointer cursor */
width: 10rem;
height: 10rem;
background-color: #0dd;
transition-property: background-color;
transition-duration: 1s;
}
div:focus { /* Apply this only when div is focused/clicked */
pointer-events: none; /* pointer-events disabled to allow toggle */
background-color: #ee0;
outline: 0;
}
<div tabindex="0"></div> <!-- tabindex allows div to be focused -->
Please click the square<br>above. Again.
Notice when the div is yellow the pointer cursor changes back to it's default mouse pointer behavior?( Move the mouse ever so slightly if it doesn't )
I want to prevent that cursor change. I want the cursor to stay in the pointer state throughout.
When the div is clicked an event is triggered, however the same button can not be clicked or focused again it seems. So clicking the yellow div would not trigger the event to revert back to blue unless we somehow trick the browser to think that very same click-space is an area outside the div. This is why the pointer-events: none line exists. So the toggle can be activated again and again, like a toggle should.
My only desire is to somehow keep the pointer cursor over the yellow div without changing it's toggle behavior. This might be impossible with pointer-events: none but are there any ways to do this? Some type of workaround or hack?
The answer you asked for:
body {
font-family: sans-serif;
}
#wrap {
position: relative;
width: 10rem;
height: 10rem;
}
#top {
cursor: pointer; /* div should *Always* have a pointer cursor */
background-color: #0dd;
transition-property: background-color;
transition-duration: 1s;
position: relative;
z-index: 100;
position: absolute;
width: 10rem;
height: 10rem;
}
#top:focus { /* Apply this only when div is focused */
pointer-events: none; /* pointer-events disabled to allow toggle */
background-color: #ee0;
outline: 0;
}
#top:focus + #bottom {
pointer-events: all;
}
#bottom {
position: absolute;
background: #f00;
pointer-events: none;
opacity: 0;
cursor: pointer;
height: 10rem;
width: 10rem;
}
HTML
<div tabindex="0" id="top"></div>
<div id="bottom" tabindex="0">
</div>
<!-- tabindex allows div to be focused -->
Please click the square<br>above. Again.
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 fairly new to HTML and CSS. In my first website being created, I encountered a problem with CSS transitions.
What I want to happen, is when you mouse over, the text and background color transition, and for the same to happen when you mouse off. But instead, one of the CSS transitions seems to be overriding the other. I can't get them both to transition at the same time on mouse off. Am I just missing something, or is it more complicated than just a "transition: color 0.5s"? It's got to be possible somehow.
Check out what I mean here. here: (http://jsfiddle.net/SeanWhelan/oz0amfL7/)
Here is the code for the button:
.btn {
background-color: #333;
color: #fff;
padding: 10px 35px;
text-decoration: none;
text-transform: none;
transition: color 0.5s; }
.btn:hover {
background: #87ff00;
cursor: pointer;
transition: background-color 0.5s;
color: #333; }
I apologise if there's a really simple way to do this, only started learning HTML and CSS a few days ago.
Give this a try:
.btn {
background-color: #333;
color: #fff;
padding: 10px 35px;
text-decoration: none;
text-transform: none;
transition: color .5s, background-color .5s; }
.btn:hover {
background: #87ff00;
cursor: pointer;
color: #333; }
Transition statements do overwrite one another. You can either comma separate the various properties you want to transition or you can use the all keyword to target all properties.