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%);
Related
I have this image that I'm trying to position to a certain spot, but no matter what I try the image stays a the bottom. I've been able to center the image horizontally but now I want to manipulate it vertically and get it to the top or near the top area. It baffles me how margin isn't working; how would I go by doing it?
*{
margin: 0;
padding: 0;
}
body{
height: 100vh;
background: linear-gradient(to bottom right,#e66465, #9198e5);
font-family: sans-serif;
}
.signup-forms{
background-color: #ffffff;
max-width: 350px;
margin: 5% auto;
text-align: center;
border-radius: 5px;
box-shadow: 0px 0px 25px 0 #3d3d3d6e;
padding: 20px 5px;
}
.signup-forms h3{
color: #EB4D8A;
margin-top: 20px;
}
.signup-forms p{
color: #C3BFDA;
font-weight: 600;
font-size: small;
margin-bottom: 20px;
}
.signup-input{
outline: none;
width: 75%;
background-color: transparent;
padding: 10px 5px;
border: none;
border-bottom: 1px solid #C3BFDA;
font-weight: bold;
margin: 15px;
}
.signup-input::placeholder{
color: #C3BFDA;
}
.signup-btn{
background-color: #fc4186;
color: white;
border: none;
border-radius: 3px;
width: 80%;
padding: 10px;
margin-top: 20px;
transition: 0.3s;
}
.signup-btnTwitter{
background-color: #54ACF0;
color: white;
border: none;
border-radius: 3px;
width: 80%;
padding: 10px;
margin-top: 10px;
transition: 0.3s;
}
.logo-img{
height: 60px;
width: 60px;
background-color: #fff;
border-radius: 50%;
padding: 10px;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 100%;
}
The image I'm trying to manipulate is .logo-img
We can't know much since there's not html code, but you can do :
`margin-top : -100px` //or how many pixels you like
or you can use the :top or bottom
Example:
top: 20%
or
bottom : 20%
or you can :
position: absolute;
z-index : 1;
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>
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 have three divs in page called header, content and footer. Header is showing at top and have no issue.
The following css is not working properly with inner div (Content) to fit its content and screen display.
While I want to
expand inner div to fill screen size and footer remain at bottom.
Keep divs in order
fill content always
I have tried many css solutions but nothing works perfect to fit div at page and content both.
.header {
background-color: #bf4b4b ;
/*margin-left: 14%;*/
top: 0;
border-width: 0.1em;
border-color: #999;
border-style: solid;
width: 100%;
height: 80px;
}
.content {
background-color: #ffffff;
margin-left: 25%;
margin-top: 5px;
float: left;
width: 46%;
border-width: 0.1em;
border-color: #999;
border-style: solid;
border-radius: 25px;
padding: 20px;
flex: 1 1 auto;
}
.footer {
background-color: #243b82 ;
/* margin-left: 14%;
float: left;*/
margin-top: 5px;
width: 100%;
height: 80px;
border-width: 0.1em;
border-color: #999;
border-style: solid;
color:white;
text-align: center;
/*
display:inline-block;
vertical-align:middle;
*/
display: inline-block;
vertical-align: bottom;
}
Please note its wordpress theme and woocommerce pages need to show inside inner div
check this jfiddle and tell me if it works as you wanted thank you.
body{
margin:0px;
}
.header{
background-color:#bf4b4b;
height:80px;
width:100%;
position:fixed;
top:0px;
left:0px;
}
.content{
height:100vh;
padding:80px 0px;
background-color:#FFFFFF;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.footer{
background-color:#243b82;
height:80px;
width:100%;
position:fixed;
bottom:0px;
left:0px;
}
Flex display could be a great option here. It looks like you started down that path already. Adding a surrounding container with a min-height of the full window, "100vh", might accomplish what you're looking for. Let me know how this works out:
<div class="container">
<div class="header">
</div>
<div class="content">
</div>
<div class="footer">
</div>
</div>
.container {
display: flex;
width: 100%;
min-height: 100vh;
flex-direction: column;
}
.header {
background-color: #bf4b4b ;
/*margin-left: 14%;*/
top: 0;
border-width: 0.1em;
border-color: #999;
border-style: solid;
width: 100%;
height: 80px;
}
.content {
background-color: #ffffff;
margin-left: 25%;
margin-top: 5px;
float: left;
width: 46%;
border-width: 0.1em;
border-color: #999;
border-style: solid;
border-radius: 25px;
padding: 20px;
flex: 1 1 auto;
}
.footer {
background-color: #243b82 ;
/* margin-left: 14%;
float: left;*/
margin-top: 5px;
width: 100%;
height: 80px;
border-width: 0.1em;
border-color: #999;
border-style: solid;
color:white;
text-align: center;
/*
display:inline-block;
vertical-align:middle;
*/
display: inline-block;
vertical-align: bottom;
}
http://codepen.io/amishstripclub/pen/gwNGXw?editors=1100
I have solved using overflow property and sticky footer as below:
.header {
background-color: #bf4b4b ;
top: 0;
border-width: 0.1em;
border-color: #999;
border-style: solid;
width: 100%;
height: 80px;
position: fixed;
right: 0;
left: 0;
}
.content {
background-color: #ffffff;
margin-left: 25%;
margin-top: 5%;
width: 46%;
border-width: 0.1em;
border-color: #999;
border-style: solid;
border-radius: 25px;
padding: 20px;
overflow:auto;
min-height: 100%;
height: auto !important;
height: 100%;
}
.footer {
background-color: #243b82 ;
width: 100%;
height: 80px;
border-width: 0.1em;
border-color: #999;
border-style: solid;
color:white;
text-align: center;
}
Looking to create this:
What would be the best way to achieve it?
IT MUST:
I'd definitely like to keep the text as text (so not using an image). Also, I'd like this to be re-usable so that I can put different text in it.
Ideally, the arrow part should be as high as the text.
NICE TO HAVE:
I'd like to be able to drop this on any background (so it isn't always on white)
Would be great if it was ie8+
Thanks!!
Have you tried something using html/css??
#vert_menu{ overflow: hidden; width: 100%; }
#vert_menu li{ float: left; }
#vert_menu a{
padding: 8px 20px 8px 40px;
float: left; text-align:center;
text-decoration: none; font: normal 16px Myriad Pro, Helvetica, Arial, sans-serif; text-shadow:0px 1px 0px #000;
color: #e6e2cf;
position: relative; text-shadow:1px 0 0 #000;
background: #525252; min-width:181px; width:auto
}
#vert_menu a::after,
#vert_menu a::before{
content: "";
position: absolute;
top: 50%;
margin-top: -19px;
border-top: 19px solid transparent;
border-bottom: 19px solid transparent;
border-left: 1em solid;
right: -1em;
}
#vert_menu a::after{ z-index: 2; border-left-color: #525252; }
<ul id="vert_menu">
<li>test</li>
</ul>
You may this in your HTML;
<div>
<button>Button</button>
</div>
And this in your CSS
a {
background: #950006;
border: none;
display: inline-block;
height: 28px;
line-height: 28px;
position: relative;
text-decoration: none;
width: 100px
}
a:before{
background: #950006;
border: none;
content: '';
display: block;
height: 20px;
left: 90px;
position: absolute;
top: 4px;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 21px;
}
a button {
color: #fff;
background: none;
border: none;
font-weight: bold;
position: relative;
width: 120px;
height: 28px;
}
and will output a button like this:-
Here is a working Live Demo. The complete button is CLICKABLE. You may test the button by changing the background of the parent div.
Hope this helps.