I'm fairly new to CSS and I was wondering how I would place a button on top of an object when hovered. Before hovering, I have this:
input[name=uh]~a:before {
display:block;
position: absolute;
top: 30px;
right: 0;
color:black;
z-index: 1;
border: solid 1px #5F99CF;
border-right:none;
text-align: center;
margin-left: -1px;
padding: 10px 0;
background-image: url(%%Black%%);
border-top: none;
border-right: none;
-moz-border-radius-bottomleft: 7px;
border-bottom-left-radius: 7px;
-webkit-border-bottom-left-radius: 7px;
-webkit-transition: width 1s, height 1s; /* Safari */
transition: width 1s, height 1s;
width: 100%;
height: 66px;
}
And when I hover it, I want to have an image (on code below in "background-image property) on top that, and when clicked goes on a link. However, I have no idea how to do that. I currently have this on :hover. Any help would be awesome, thanks!
input[name=uh]~a:hover:before {
display:block;
position: absolute;
top: 30px;
right: 0;
z-index: 1;
border: solid 1px #5F99CF;
border-right:none;
font-size:15px;
line-height:15px;
color:#999;
text-align: center;
margin-left: -1px;
padding: 10px 0;
border-top: none;
border-right: none;
background-image: url(%%Battlecats-Menu%%),url(%%subredditrulesbutton%%),url(%%editflairbutton%%),url(%%eventdatabutton%%);
background-repeat: no-repeat, no-repeat, no-repeat;
background-size: 500px 300px, 500px 60px, 50px 60px ;
-moz-border-radius-bottomleft: 7px;
border-bottom-left-radius: 7px;
-webkit-border-bottom-left-radius: 7px;
content: "No more battle cats until you finish your homework!";
background-color: #00ff00;
color:white;
text-decoration: none!important;
width: 500px;
height: 280px;
}
Below is the simple css code that I have created for you. I have added hover to the parent element of both object and the button.
I hope this will help you :)
.button{ display: none; }
.object-inner:hover > .button{ display: inline-block; }
<div class="object-inner">
Click
<div class="object">
I'm an object!
</div>
</div>
Related
I have a button spanning the right side of the window that will open a menu when clicked. When the scroll-bar appears on the page, however, the button nearly disappears behind it. My question is simply: how do I use CSS or JavaScript to take the scrollbar's width into consideration when calculating either the position or the width of the button? Thanks in advance.
HTML:
<body>
<div id='ui'>
<div id='menu' class='x'>
<div id='menuBtn'></div>
</div>
</div>
</body>
CSS:
#ui{
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
#menu{
float: right;
height: 100%;
width: 600px;
background-color: white;
border-bottom-left-radius: 15px;
border-top-left-radius: 15px;
transition: all .5s;
}
#menu.x{
margin-right: -595px;
box-shadow: 0px 0px 15px black;
}
#menu.x:hover{
margin-right: -575px;
box-shadow: 0px 0px 30px black;
}
#menu.o{
margin-right: 0px;
box-shadow: 0px 0px 45px black;
}
#menuBtn{
transition: all .5s;
background-color: red;
height: inherit;
width: 45px;
border-bottom-left-radius: 15px;
border-top-left-radius: 15px;
border-right: groove darkgray 5px;
border-left: groove darkgray 5px;
}
You can try this:-
#menuBtn{
transition: all .5s;
background-color: red;
height: inherit;
width: 45px;
border-bottom-left-radius: 15px;
border-top-left-radius: 15px;
border-right: groove darkgray 5px;
border-left: groove darkgray 5px;
position: absolute; // try with fixed
right: 0px;
}
I need to create the button styles in the image below (the one on the right is transparent, not white).
The bottom right corner is obviously the tricky part. It's not just a simple bevel; it's slightly rounded.
The best solution I've come up with is to apply an SVG image mask to a pseudo element positioned to the right of the button and reduce the right padding to compensate. But this approach has its limitations:
it requires a fixed height button (at least, if I want maintain the aspect ratio of the corner)
it requires a different SVG for each button size
I don't see how it can work for the transparent button style
So I'm hoping someone can suggest a different/better approach!
Thanks
UPDATE:
Here is my current approach - https://codepen.io/peteheaney/pen/jwVEPm
$primary: #FAB500;
*, *::after, *::before {
font-family: sans-serif;
box-sizing: border-box;
}
.button {
background-image: none;
border-width: 2px;
border-style: solid;
border-color: transparent;
cursor: pointer;
display: inline-block;
font-weight: bold;
margin-bottom: 0;
text-align: center;
text-decoration: none;
text-transform: uppercase;
touch-action: manipulation;
vertical-align: middle;
white-space: nowrap;
transition: all 0.2s;
&:active,
&:hover,
&:focus {
text-decoration:none;
}
&--large {
font-size: 15px;
padding-left: 24.818px;
height: 52px;
line-height: 52px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
position: relative;
margin-right: 24.818px;
&:after {
border-top: 2px solid $primary;
border-bottom: 2px solid $primary;
background: $primary;
content: "";
border-top-right-radius: 6px;
position: absolute;
left: 100%;
bottom: -2px;
width: 24.818px;
height: 52px;
mask: url(http://assets.peteheaney.com.s3.amazonaws.com/button-corner-right.svg) top left / cover;
}
}
&--primary {
color: #000;
background-color: $primary;
border-color: $primary;
&:active,
&:hover,
&:focus {
background-color: darken($primary, 2%);
border-color: darken($primary, 2%);
}
}
}
If you don't mind leaving the corner clickable, you could make the button invisible and just use a background image:
button{
width:x;
height:y;
border:none;
background-color:none
background-image:url(button_image.png);
background-position:center;
background-size:x y;
background-repeat:no-repeat;
}
With button_image.png being the image of your button style without text.
You can try to draw it like this using before and after :
.button {
position: relative;
display: inline-block;
background-color: orange;
color: white;
padding: 20px 40px;
font-size: 14px;
border-radius: 5px;
text-decoration: none;
}
.button:after {
content: '';
position: absolute;
z-index: 10;
display: block;
bottom: -6px;
right: -2px;
width: 10px;
height: 20px;
transform: rotate(45deg);
background-color: white;
}
.button:before {
content: '';
position: absolute;
z-index: 100;
display: block;
bottom: -1px;
right: 4px;
width: 13px;
height: 23px;
transform: rotate(45deg);
background-color: orange;
border-radius: 10px;
}
Button
Here is an example of how this could possibly be achieved with pure CSS.
However an image or an SVG might be a more efficient way to solve this issue.
.Large{
position:relative;
display:inline-block;
background:#FFB300;
border:none;
padding:20px 0 20px 30px;
border-radius:10px 0 0 10px;
height:40px;
font:700 1.5em/40px Arial;
}
.Large::after{
content:"";
display:block;
position:absolute;
top:0;
right:-30px;
width:30px;
height:50px;
background:#FFB300;
border-radius:0 10px 0 0;
}
.Large::before{
content:"";
display:block;
position:absolute;
bottom:0;
right:-30px;
width:0;
height:0;
border-top: 15px solid #FFB300;
border-right: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid #FFB300;
}
<a class="Large">LARGE</a>
I am not really happy with my result, but here it goes just in case you can make it better.
The different color is just to make it easier to see what is what.
I have focused on solving the transparent one. Once you have it, solving the other is easier.
:root {
--width: 10px;
--width2: 14px;
}
.test {
position: relative;
margin: 20px;
width: 300px;
height: 150px;
position: absolute;
border: var(--width) solid transparent;
border-image: linear-gradient(to bottom right, orange 0%, orange 70%, transparent 70%);
border-image-slice: 1;
}
.test:before {
content: "";
position: absolute;
height: 25px;
width: 150px;
right: 29px;
bottom: -10px;
transform: skewX(-45deg);
border: solid 0px transparent;
border-bottom-color: red;
border-bottom-width: var(--width);
border-right-color: red;
border-right-width: var(--width2);
border-bottom-right-radius: 25px;
}
.test:after {
content: "";
position: absolute;
height: 50px;
width: 25px;
right: -10px;
bottom: 29px;
transform: skewY(-45deg);
border: solid 0px transparent;
border-bottom-color: red;
border-bottom-width: var(--width2);
border-right-color: red;
border-right-width: var(--width);
border-bottom-right-radius: 25px;
}
<div class="test"></div>
I decided to go for the approach I have demonstrated in this pen - https://codepen.io/peteheaney/pen/bRBOMq (compiled CSS version below)
*, *::after, *::before {
font-family: sans-serif;
box-sizing: border-box;
}
.button {
background-image: none;
border-style: solid;
border-top-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-right-width: 0;
border-color: transparent;
cursor: pointer;
display: inline-block;
font-weight: bold;
margin-bottom: 0;
text-align: center;
text-decoration: none;
text-transform: uppercase;
touch-action: manipulation;
vertical-align: middle;
white-space: normal;
transition: all 0.2s;
}
.button:active, .button:hover, .button:focus {
text-decoration: none;
}
.button--large {
font-size: 15px;
padding: 16px 0 14px 21px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
position: relative;
margin-right: 21px;
}
.button--large:before {
content: "";
position: absolute;
left: 100%;
top: -2px;
width: 21px;
height: calc(100% - 17px);
border-top-right-radius: 6px;
}
.button--large:after {
position: absolute;
left: 100%;
bottom: -2px;
width: 21px;
height: 21px;
transition: all 0.2s;
}
.button--primary {
color: #000;
background-color: #FAB500;
border-color: #FAB500;
}
.button--primary:before {
background-color: #FAB500;
transition: all 0.2s;
}
.button--primary:active:before, .button--primary:hover:before, .button--primary:focus:before {
background-color: #f0ae00;
border-color: #f0ae00;
}
.button--primary:after {
content: url(http://assets.peteheaney.com.s3.amazonaws.com/button-corner-primary-large.svg);
}
.button--primary:active, .button--primary:hover, .button--primary:focus {
background-color: #f0ae00;
border-color: #f0ae00;
}
.button--secondary {
color: #000;
border-color: #FAB500;
}
.button--secondary:before {
border: 2px solid #FAB500;
border-bottom: 0;
border-left: 0;
transition: all 0.2s;
}
.button--secondary:active:before, .button--secondary:hover:before, .button--secondary:focus:before {
background-color: #FAB500;
}
.button--secondary:after {
content: url(http://assets.peteheaney.com.s3.amazonaws.com/button-corner-secondary-large.svg);
}
.button--secondary:active, .button--secondary:hover, .button--secondary:focus {
background-color: #FAB500;
border-color: #FAB500;
}
<a class="button button--large button--primary" href="">My button</a>
<a class="button button--large button--secondary" href="">My other button</a>
Firstly, I divided the right-hand portion into top and bottom (using :before and :after). The top-right pseudo element just has a background color and a top right border radius. This way the top-right portion can have a flexible height, meaning the buttons don't need to have a fixed height. The bottom right pseudo element is essentially an SVG ( using content: url(/path/to/svg.svg) ). This pseudo element always has a fixed width and height, so it maintains its size and aspect ratio regardless of the width/height of the button.
The outline style button is just a variation on the other style, with more borders and less backgrounds.
The only downside to this approach is the need for a different SVG for each button style. But I'm happy with that compromise.
Another take on Arthur's approach.
If you create the bottom right image (the white corner and the yellow corner border) you are able to position this so it stays to the bottom right and you have the rest of the button to style yourself.
button {
background-image:url(corner.svg);
height: 20px;
padding: 5px;
border-radius: 5px;
background-color: yellow;
background-repeat: no-repeat;
background-position: bottom right;
}
I am trying to add a ghost button on a bootstrap carousel here: http://oarvoredo.businesscatalyst.com/
It's the first slide the white button.
.a_banner a {
color:#FFF !important;
font-size:22px !important;
text-decoration:none;
position:absolute;
top: 75% !important;
text-align:center;
margin-left:40%;
margin-right:40%;
border:1px solid #FFF;
border-radius:16px;
padding-left:1%;
padding-right:1%;
}
I am not being able to center it properly with position:absolute;. How can I make this work?
Set left to 50% and margin-left to minus half of button width.
.a_banner a {
display: inline-block;
position: absolute;
top: 75%;
left: 50%;
width: 200px;
margin: 0 0 0 -100px;
color: #FFF;
font-size: 22px;
text-decoration: none;
text-align: center;
border: 1px solid #FFF;
border-radius: 16px;
padding-left: 1%;
padding-right: 1%;
}
Try:
left: 50%;
transform: translateX(-50%);
I'm trying to reproduce this image using only css
I've played with the radius property but as you will see I don't get the same angle effect.
.shape{
background-color: black;
opacity:0.9;
filter:alpha(opacity=90); /* For IE8 and earlier */
color:white;
font-weight:bold;
padding: 30px 30px 30px 50px;
text-align:center;
position:absolute;
right:0;
bottom:0;
z-index:1003;
font-size: 20px;
border-top-left-radius: 125px;
-moz-border-radius-topright: 125px;
}
You can see what I've tried at http://jsfiddle.net/ymorin007/7qX4U/
Thanks.
Might not be cross-browser compatible, but this'll get you close :)
.shape{
background-color: black;
opacity:0.9;
filter:alpha(opacity=90); /* For IE8 and earlier */
color:white;
font-weight:bold;
padding: 30px 30px 30px 50px;
text-align:center;
position:absolute;
right:0;
bottom:0;
z-index:1003;
font-size: 20px;
border-top-left-radius: 125px;
-moz-border-radius-topright: 125px;
}
.shape::before{
content:"";
width:0;
height:0;
position:absolute;
left:-34px;
border-left: 53px solid transparent;
border-right: 53px solid transparent;
border-bottom: 53px solid black;
}
fiddle: http://jsfiddle.net/pggRb/
If you needed to hit test, you may want to consider using a skewed pseudo element:
div {
position: fixed;
bottom: 0;
right: 0;
height: 50px;
width: 200px;
background: gray;
cursor: pointer;
transition: all 0.6s;
}
div:before {
content: "";
position: absolute;
top: 0;
left: -50%;
width: 100%;
height: 100%;
background: inherit;
transform: skewX(-45deg);
border-radius: 20px 0 0 0;
z-index: -1;
}
div:hover {
background: tomato;
]
<div>SOME TEXT</div>
I want to make a CSS only speech bubble. So far, I have this...
Example
CSS
div {
position: relative;
background: #fff;
padding: 10px;
font-size: 12px;
text-align: center;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
div:after {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: -60px;
margin-left: -15px;
border-width: 30px 20px 30px 20px;
border-style: solid;
border-color: #fff transparent transparent transparent;
}
jsFiddle.
...which is almost exactly what I want. However, I want a light border around the whole thing.
Obviously, on the main portion, that is simple as adding border: 1px solid #333 to the div.
However, as the tail of the bubble is a border hack, I can't user a border with it.
I tried setting a box shadow of 0 0 1px #333 but browsers apply the border to the rectangular shape of the element (which I guess is what they should do).
jsFiddle.
My next thoughts were finding a Unicode character that looks like a bubble tail and absolutely positioning it there, with text-shadow for the border and using z-index of the main bubble to hide the top shadow of the text.
What Unicode character would be suitable for this? Should I do something different? Do I need to resort to an image?
I only have to support Mobile Safari. :)
<div>Hello Stack Overflow!<span></span></div>
div span:after {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: -51px;
margin-left: -15px;
border-width: 20px 20px 30px 20px;
border-style: solid;
border-color: #000 transparent transparent transparent;
}
http://jsfiddle.net/QYH5a/
For the Unicode character approach you suggested, the most appropriate would be ▼ U+25BC BLACK DOWN-POINTING TRIANGLE. I don't know whether iOS has glyphs for it.
Here is a similar solution:
http://jsfiddle.net/JyPBD/2/
<div>Hello Stack Overflow!<span></span></div>
body {
background: #ccc;
}
div {
position: relative;
background: #fff;
padding: 10px;
font-size: 12px;
text-align: center;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
border: 1px solid #333;
}
div:after {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: -60px;
margin-left: -16px;
border-width: 30px 20px 30px 20px;
border-style: solid;
border-color: green transparent transparent transparent;
}
div span
{
border-color: #FF0000 transparent transparent;
border-style: solid;
border-width: 25px 15px;
bottom: -51px;
margin-left: -65px;
position: absolute;
z-index: 10;
}
You could use the filter property with box-shadow() to do it...
-webkit-filter: drop-shadow(1px 1px 1px #111) drop-shadow(-1px -1px 1px #111);
jsFiddle.