I have a custom cursor image that I'm using with a span inside a bootstrap anchor button.
I'm trying to get overflow hidden to work so when the cursor is close to the edges of the button the image is cutoff like the attached pic.
I have a codepen here that I'm working with. Can anyone help with this?
HTML:
<a href="#" class="btn btn-primary btn-spotlight" id="happyButton">
<span class="spotlight">EXPLORE</span>
</a>
SCSS:
#happyButton {
margin-top: 20px;
padding-left: 0;
padding-right: 0;
color: white;
&:hover {
overflow: hidden;
white-space: nowrap;
}
& .spotlight {
cursor: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/happy.png") 5 12, auto;
padding: 15px 30px;
}
}
Cursors are not elements of the page, and thus can't be manipulated like that.
I'd say there's no sane way to accomplish this.
Related
Please note: I have already tried the solution listed here which does not serve my purposes as it still draws a box around the image
Update: I have taken a further look into this and found that one solution is to draw an SVG of the image in question and make this the button so that there is not such a large box surrounding the image. I would prefer not to do this as I have many assets but would this be the only solution?
I am trying to place a button on my website but make it so that the clickable area is exactly the image and nothing else. I have been trying to find solutions for this but perhaps I am not searching the correct terms.
At present, I am using Bootstrap to create a button for a carousel. This works fine but the issue I am having is the square border around the button itself which will cause a problem as I put more buttons on the page that are closely placed together.
I would like the clickable area to be restricted strictly to the png itself, which includes the white border seen on the image linked above.
My code at present looks as follows.
HTML:
<div class='background'></div>
<div class="map">
<img id='mainMap' src='assets/maps/map.png' alt='map'>
<!-- Modal's toggle button has data that's used to determine what content to use -->
<!-- Bridge icons -->
<button type="button" class="btn btn-primary-outline-btn bridge-btn" id='bridge1' data-toggle="modal" data-target="#exampleModal"><img class="bridge_icon" src="assets/icons/bridge1.png" alt="image"></button>
</div>
CSS:
.camera_icon, .video_icon{
width: 30px;
height: 30px;
}
.bridge_icon {
width: 150px;
height: auto;
margin: 0px;
padding: 0px;
}
#bridge1 {
top: 3%;
left: 10%;
position: inherit;
}
/* Buttons */
.btn, .btn-outline-primary, .video-btn {
background-color: transparent;
border-color: #ccc;
padding: 0px;
box-shadow: none;
}
.btn:focus,.btn:active {
outline: none !important;
box-shadow: none;
}
.bridge-btn {
border-color: hotpink;
}
.btn-outline-primary:hover, .video-btn:hover{
background-color: #e4dbef;
border-color: #ccc;
}
.btn-outline-primary:focus, .video-btn:focus{
background-color: #e4dbef;
outline: none;
border-color: #ccc;
}
.btn:focus, .btn:active:focus, .btn.active:focus { outline: none; ! important; outline-style: none; }
Any help you could provide would be very useful.
Thank you.
If I understand correctly the button has a border you don't want? If that is the case try changing btn-primary-outline-btn to btn-transparent-outline-btn
The main issue is caused by a button being circular. But I really want a circular button, which is leading to hovering problems!
All I want is to have a circular <a> button that when hovered-over will reveal another element below it, like a div or another a tag. These two elements are separated by a gap.
Then I should be able to move my mouse down and hover over the revealed element and click on it or whatever. But of course if you unhover the original <a> then the other element will disappear, especially since there is a gap between the two elements. What is the best way to make it so that I can move my mouse from element 1 to element 2 without element 2 vanishing during mouse travel?
Ideally this shouldn't require JS.
I've created a basic setup for this so far to get started:
body {
padding: 30px;
height: 100vh;
}
#myBtn {
background-color: grey;
padding: 20px;
border-radius: 50%;
}
#hoverInfo {
display: none;
margin-top: 40px;
background-color: green;
width: 100px;
height: 50px;
}
#myBtn:hover + #hoverInfo, #hoverInfo:hover {
display: block;
}
<a id="myBtn" href="/">
button
</a>
<a id="hoverInfo" href="/">hover info</a>
Here's an explanation of an old solution attempt of mine:
My first solution to stop element 2 from vanishing upon downward movement of the mouse was to put an invisible hoverable element between elem 1 and 2 which would keep elem 2 active while the mouse moves down to it. And this would work great, IF all elements were rectangular. But my elem 1 is circular!
This means that there is literally one single pixel of contact between the middle hover buffer element and elem 1 because there are those circular "corner" gaps between elem 1 and the invisible middle element. So whenever you move your mouse down, you are still going to miss that middle hover element 99% of the time.
And you can't put it behind elem 1 either to fill in those circular "corners" because the circular element has a bounding box that you can only see in inspect element and this bbox prevents you from filling up those "corners" with an area that actually interacts with the mouse, therefore making this solution useless. It's quite confusing in my explanation but try it out if you manage to implement this "solution".
The first solution to come to mind is wrapping the circular button into a parent div, which will be the div that will activate the hover effect. This way, you can add padding-bottom to imitate the gap look while still making the "gap area" trigger the hover effect. In the snippet below, I made the wrapper div have a red background so you can see how it works. If you remove the red background, it should function as intended.
https://codepen.io/xenvi/pen/yLONOEa
body {
padding: 30px;
height: 100vh;
}
.buttonWrapper {
display: inline-block;
margin-bottom: 40px;
background: red;
}
#myBtn {
background-color: grey;
padding: 20px;
border-radius: 50%;
}
#hoverInfo {
display: none;
background-color: green;
width: 100px;
height: 50px;
}
.buttonWrapper:hover+#hoverInfo,
#hoverInfo:hover {
display: block;
}
.buttonWrapper:hover {
margin: 0;
padding-bottom: 40px;
}
<div class="buttonWrapper">
<a id="myBtn" href="/">
button
</a>
</div>
<a id="hoverInfo" href="/">hover info</a>
You can solve this easily using a pseudo element that will make the hoverable area bigger and that you activate only on hover:
body {
padding: 30px;
height: 100vh;
}
#myBtn {
background-color: grey;
padding: 20px;
border-radius: 50%;
position:relative;
}
#myBtn:before {
content:"";
display:none;
position:absolute;
top:90%;
left:0;
right:0;
height:28px;
}
#hoverInfo {
display: none;
margin-top: 40px;
background-color: green;
width: 100px;
height: 50px;
}
#myBtn:hover::before {
display:block;
background:rgba(0,0,255,0.2); /* to illustrate */
}
#myBtn:hover + #hoverInfo, #hoverInfo:hover {
display: block;
}
<a id="myBtn" href="/">
button
</a>
<a id="hoverInfo" href="/">hover info</a>
Im working on a little project where I want to add a button which opens a menu. The button looks great on Firefox, but when I check on brave or chrome the button elements seem to slip out and I cant pinpoint what it is...
Button on Firefox
Button on Chrome
This is the button with the elemens inside.
<button id="add-menu">
<img src="plus.png" height="40px" id="plus-minus-icon"><p>Add New Menu</p>
</button>
This is the CSS code, hope you can help me.
#add-menu {
grid-area: 5 / 1 / 5 / 3;
height: 100%;
width: 80%;
background-color: #333333;
border-radius: 25px;
justify-self: center;
display: flex;
align-items: center;
border: 1px solid black;
z-index: 1;
}
#add-menu img {
margin-left: 5px;
}
#add-menu p {
color: white;
font-size: 24px;
line-height: 50px;
}
Use -webkit- and -moz- to solve this problem.
Please take a look here: what-are-moz-and-webkit
Be aware of some known issues with buttons, fieldset and some more when having display flex or grid. You can have a glimpse of this issue here.
Maybe in newer versions of chrome they addressed this issue, this is why it looks fine to #sumeshsn1.
So, in order to solve this issue, wrap the button content on a span element and add the flex properties there:
<button class="button">
<span class="button__wrapper">
<img class="button__image" aria-hidden="true" src="https://cdn2.iconfinder.com/data/icons/free-basic-icon-set-2/300/7-128.png">
<span class="button__label">Add New Menu</span>
</span>
</button>
Some notes:
I remove the id and add classes instead, as this would help you maintaining your code and would enable you to use multiple buttons on your html while being a valid document (you are supposed to have only one id in the document).
As the image purpose is just a visual hint for the button function, lets add an aria-hidden=true attribute to the image element.
Remove inline styles (the height attribute you have on your image tag).
Now, let's review the CSS:
.button {
height: 100%;
width: 80%;
background-color: #333333;
border-radius: 25px;
border: 1px solid black;
}
.button__wrapper {
display: flex;
flex-flow: row nowrap;
align-items: center;
}
.button__image {
margin-right: 5px;
height: 40px;
}
.button__label {
color: white;
font-size: 24px;
line-height: 50px;
}
Some notes:
Remove the grid-aria declarations, as this property only makes sense when using a display: grid element, which you don't.
Remove the z-index as well, you need to mess with this property for your issue.
I also wrote this snippet using BEM. You might want to have a look at how this methodology works and how it can help you here.
You can find the updated pen here.
I have problem with using animation in css and event handler in JS.
I have to specific styles for my button (normal and with :active suffix). This solution let's me simulate 'clicking button'. In Html(this is angular directive) I have directive ng-click on that button but it only runs event when I click body of a button not border. But my css sets pointer on the border and there is animation an on clicking border too.
I am looking for the best practice/solution to repair that incident. Maybe I must leave css style with active suffix or add something to my styles.
CSS
#addButton {
padding: 5px;
float: left;
background: linear-gradient(#92AFDE, #668FED);
border: solid 2px #14438F;
margin-left: 10px;
border-radius: 10px;
font-size: 20px;
cursor: pointer;
}
#addButton:ACTIVE {
transform: translateY(4px);
}
HTML
<div class="card">
<img ng-click="selectCard()" style="width: 150px; height: 200px;" ng-src="cards/\{{cardId}}.png"></img>
<button ng-click="addCard()" id="addButton">Add<div class="count">0</div></button>
<div id="delButton">X</div>
</div>
Because when you specify border it comes after the actual width of the element.
Use
#addButton{
box-sizing:border-box
}
This css property will merge the border space in actual width.
Faced the same issue on a project I am developing. I used the above answer https://stackoverflow.com/a/38826326/7622397. But it didn't work. Clicking on border does not fire the click event. But it's important to add box-sizing: border-box (as mentioned in the answer) to make sure the below mentioned workaround works
The reason mentioned in the comment seems to be correct
OK i know where is the problem. If i click on the button the "activate" suffix moves the button down and browser don't notice click on this button because pointer is outside my div (after moving)
As a workaround, I created a div outside the button, gave a padding-top css (value is same or greater as the height of translateY) and give the onClick event to the div and not the button. I know, it's not a tidy fix, but it certainly works.
Code for reference
.sw-form-button-card {
padding: 5px 10px;
text-decoration: none;
background: #668ad8;
color: #FFF;
border: none;
box-sizing:border-box;
border-bottom: solid 3px #627295;
border-radius: 3px;
cursor: pointer;
}
.sw-form-button-card:active {
-ms-transform: translateY(2px);
-webkit-transform: translateY(2px);
transform: translateY(2px);
border-bottom: none;
}
HTML part:
<div data-bind="click: () => openDDDialog()" style="padding-top: 5px;">
<button class="sw-form-button-card">
<span style="font-size: 15px;" data-bind="text: 'Button text'"></span></div>
</button>
</div>
I'm trying to remove all effects on a HTML Button element.
The HTML:
<div id="go">
<button onclick="load.update(true,cards.id);" type="submit"></button>
</div>
The CSS:
#header #go button{
display:block;
border:0 none;
cursor:pointer;
outline:none;
vertical-align:top;
width:18px;
height:33px;
background:url('../images/cards/go.png'); //Just an image to replace it all.
}
In Chrome and Firefox this works fine, but in IE (8 at least) the "push" effect of the button is still there when the button is clicked (EG the offset)
Is there any Tricks i can use to remove this effect?
Thanks in advance!
Diesal.
you need to add background styles to :hover :active :focus as well.
#header #go button:hover {
border: none;
outline:none;
padding: 5px;
background:url('../images/cards/go.png');
}
#header #go button:active {
border: none;
outline:none;
padding: 5px;
background:url('../images/cards/go.png');
}
#header #go button:focus {
border: none;
outline:none;
padding: 5px;
background:url('../images/cards/go.png');
}
I had a similar experience, and was able to fix it in IE8, but not IE7. See it working here:
http://jsfiddle.net/GmkVh/7/
HTML:
<button></button>
CSS:
button {
color:#fff;
background:#000;
border: none;
outline:none;
padding: 5px;
cursor: pointer;
height: 25px;
}
/*
It hits this state (at least in IE) as you're clicking it
To offset the 1px left and 1px top it adds, subtract 1 from each,
then add 1 to the right and bottom to keep it the same width and height
*/
button:focus:active {
padding-top: 4px;
padding-left: 4px;
padding-right: 6px;
padding-bottom: 6px;
color: #ccc;
}
One way would be to get rid of the <button> tag completely and use a <a href=".." /> tag in its place styled the way you want.
Just have the link do a javascript postback.
update (from comments):
one example:
Click Here
Of course, this requires javascript to be enabled and is considered by some to be an abuse of the anchor tag.
There are alternate versions if you are using .net webforms or jQuery.
After you have done whatever you like with the border etc., just put a span inside the button around the text like so:
<button class="button" type="submit"><span class="buttonspan">Blah</span></button>
Then the CSS becomes:
button {position:relative; width:40px; height:20px /* set whatever width and height */}
buttonspan {
height: 30px;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
<div class="calculation_button">
<button type="submit"><span>Count</span></button>
</div>
.calculation_button span {
position: relative;
left: 0;
top: 0;
}
works for me in IE and FF
The following helped for me in IE 10:
button:active {
position: relative;
top: -1px;
left: -1px;
}
It fixed the top perfectly, but left still had background bleed-though for my case. Still looks a bit odd if the user starts clicking and then moves the mouse off the button. Also obviously only enable the rule for relevant IE version(s).
Position relative seemed to have taken care of the problem
Simply have a wrapper within the button:
So
<button>
<div class="content">Click Me</div>
</button>
and set the DIV to position relative with top: 0, left: 0
Example below:
http://jsfiddle.net/eyeamaman/MkZz3/
It's a browser behaviour, a simple solution is to use a link tag instead of button (since you're calling a javascript function).
<img src="myimg"/>
If you still want to use the , I've found that there are some characteristics on each browser (in a simple debug):
Chrome adds outline and padding
Firefox adds a whole lot of stuff with the standart button border
IE messes with the inner text position
So to fix them, you have to manipulate the pseudo selectors for the button behaviour. And for IE, a good solution is to envolve your text on a element, and make it relative positioned. Like so:
<button type="button" class="button"><span>Buttom or Image</span></button>
<style>
button,
button:focus,
button:active{
border:1px solid black;
background:none;
outline:none;
padding:0;
}
button span{
position: relative;
}
</style>
Pen
This is a duplicate question