I've tried solutions to similar questions but can't figure out for the life of me how to get the text to show on top of my poor custom buttons in Safari! They show perfectly in Chrome and Firefox... but that won't help iOs users of course.
Any suggestions for how to get these to display with the text on top of the intended background properly?
HTML:
Register
Register
CSS:
/* Hexagon Button Style */
.dark-button,
.light-button{
position: relative;
display: block;
background: transparent;
width: 280px;
height: 48px;
line-height: 46px;
text-align: center;
font-size: 16px;
letter-spacing: 1.8px;
text-decoration: none !important;
text-transform: uppercase;
font-weight:600;
margin: 15px auto;
font-family: Orbitron, Helvetica, sans-serif;
}
.dark-button:before,
.dark-button:after,
.light-button:before,
.light-button:after{
position: absolute;
content: '';
width: 280px;
left: 0px;
height: 24px;
z-index: -1;
}
.dark-button:before,
.light-button:before{
transform: perspective(8px) rotateX(3deg);
}
.dark-button:after,
.light-button:after{
top: 24px;
transform: perspective(8px) rotateX(-3deg);
}
/* Hex Button color styles */
.dark-button{
color: #ffffff;
}
.light-button{
color: #2c2a2b;
}
.dark-button.border:before,
.dark-button.border:after {
background: #2c2a2b;
}
.light-button.border:before,
.light-button.border:after {
background: #ededed;
}
/* Hex Button hover styles */
.dark-button.border:hover:before,
.dark-button.border:hover:after,
.light-button.border:hover:before,
.light-button.border:hover:after{
background: #BDBDBD;
}
.dark-button.border:hover,
.light-button:hover{
color: #ffffff;
}
>> Here's the CodePen link
It does appear, as hinted at in the question, that the various transforms are creating the problem. A non null transform can create a new stacking context - though exactly why the different browsers treat the aggregate of transforms differently I don't know.
However, I'd like to suggest a simpler way of creating the look - using clip-path on the anchor element. This obviates the need for pseudo elements and transforms so keeps things simple as far as stacking contexts are concerned.
This snippet only has the CSS required for the green button but the principle is the same for the other buttons. And you will want to play around with the % settings on the clip path to get exactly the pointy look that you want.
/* Hexagon Button Style */
/* Green Button Style */
.green-button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 180px;
height: 48px;
line-height: 38px;
text-align: center;
font-size: 14px;
letter-spacing: 1.8px;
text-decoration: none !important;
text-transform: uppercase;
font-weight: 600 !important;
color: #ffffff;
margin: 15px auto;
font-family: Orbitron, Helvetica, sans-serif;
clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
background-color: #4f9f45;
}
.green-button:hover {
color: #ffffff;
}
Register
Note: clip-path is not supported on IE so users may have to put up with a rectangular button if IE is still in use.
Related
I am fairly new to coding and had to make a html website for uni, this ive tried position: absolute etc but still messed up any help please. sorry if ive done this question wrong or uploaded too much im new to this. Basically i want things exactly where i placed them but to resize on different devices and resolutions etc.
html { webkit-background-size: cover;
moz-background-size: cover;
o-background-size: cover;
background-size: cover;
}
/*this is the main title*/
h2 {
color: White;
font-family: optima;
font-size: 100px;
}
Ive tried commenting the code to help understand whats what.
/*this is for the logo*/
h3 {
text-align: center;
max-width: 100%;
}
/*this is the sub title*/
h4 {
color: White;
font-family: optima;
font-size: 20px;
border-width: 5px;
}
/*centering text for all pages titles other than contact us*/
.text-center {
margin: 0;
padding:0;
text-align: center;
position: absolute;
top: 50%;
left:50%;
transform: translateX(-50%) translateY(-50%);
}
/*centering text for contact us*/
.text-center2 {
margin: 0;
padding:0;
text-align: center;
position: absolute;
top: 30%;
left:50%;
transform: translateX(-50%) translateY(-50%);
}
/*icons to take you to other pages*/
.material-icons {
color: white;
font-size: 48px;
}
/* When moving the mouse over the button, adds tomato color */
.material-icons:hover {
color: tomato;
}
/*left text box title*/
.head-text h1 {
font-family: 'Roboto', sans-serif;
font-style: normal;
font-size: 25px;
margin: 0;
padding:0;
text-align: center;
position: absolute;
top: 10%;
left:7%;
transform: translateX(-10%) translateY(-10%);
color: White;
}
/*right text box title*/
.head-text h5 {
font-family: 'Roboto', sans-serif;
font-style: normal;
font-size: 25px;
margin: 0;
padding:0;
text-align: center;
position: absolute;
top: 12%;
left:70%;
transform: translateX(-10%) translateY(-10%);
color: White;
}
/*left text box on pages*/
.Body-Text p {
font-family: 'Roboto', sans-serif;
font-style: normal;
font-size: 20px;
top: 15%;
left: 1%;
width: 30%;
position: absolute;
z-index: 1;
visibility: show;
color: white;
border: 2px solid white;
background-color: grey;
}
You can use media queries to set different style rules for different resolutions.
Give this a read, hopefully it should help you understand how to implement them.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
To make an HTML page responsive(responsive means it works pretty fine and cool on all devices of all sizes). It is not possible by absolute positioning. 1) You have to use media queries [e.g. # media all width or e.g #import url("googleimage123.com")]
2) The language Bootstrap is used for this. Its just like HTml and css. With Bootstrap you can Build fast, responsive sites. Quickly design and customize responsive mobile-first sites.
Here are some links to learn these:
To learn Bootstrap: https://www.w3schools.com/bootstrap/
To learn to use Media Queries in Css: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
To learn any computer/ programming language, or to get help regarding any issue related to them, I would prefer you to go along with w3schools.com
Good luck and have fun through your coding journey!
I am trying to vertically and horizontally center the plus sign inside of the circle. I've tried using line-height, but that does not seem to work:
CODE
.circle {
font-size: 3.27rem;
font-weight: 400;
width: 94px;
border-radius: 50%;
color: white;
line-height: 94px;
text-align: center;
padding: 0;
height: 94px;
margin: 0 auto;
box-shadow: 0px 2px 5px rgba(94, 94, 94, 0.68);
cursor: pointer;
background: #fcce00;
position: absolute;
right: 50px;
z-index: 10;
span {
line-height: 94px;
}
}
<div class="circle">
<span>+</span>
</div>
Although you code seems to work as you desire (tested in FF), you need to take your span out of .circle in your CSS, because this is not a pre-processor CSS, therefore not valid CSS.
Snippet:
.circle {
font-size: 3.27rem;
font-weight: 400;
width: 94px;
border-radius: 50%;
color: white;
line-height: 94px;
text-align: center;
padding: 0;
height: 94px;
margin: 0 auto;
box-shadow: 0px 2px 5px rgba(94, 94, 94, 0.68);
cursor: pointer;
background: #fcce00;
position: absolute;
right: 50px;
z-index: 10;
}
span {
line-height: 94px;
}
<div class="circle">
<span>+</span>
</div>
Your plus sign is actually vertically centred correctly as far as fonts are concerned. The bottom of the plus symbol aligns with the box baseline - what you don't see however is the top line. If you change the plus symbol to a capital letter, such as B, you will see what I mean.
Check this article for an in-depth explanation: http://christopheraue.net/2014/03/05/vertical-align/
This answer is based on the practical behavior of concerned css properties to achieve vertical align of minus sign and plus sign inside button(including circles) upon increasing the font-size(to any extent) regardless of font-family used.
Use Case: Sometimes you want bigger buttons with a plus or minus sign inside it. But the font-size is too small for the button. As you increase the font-size of the button, the plus and minus sign fails to align vertically as was the case with me. That's when I came up with the following solution.
Note: I could't find a solution anywhere else, so I ended up with this solution. I am open to any say you have on the solution so feel free to leave some comments:)
/* common style */
button {
height: 50px;
width: 200px;
background: #216AFF;
color: white;
}
.minus {
font-size: 70px;
display: flex;
justify-content: center;
line-height: 35px;
}
.plus {
font-size: 50px;
display: flex;
justify-content: center;
line-height: 45px;
}
<button class="minus">-</button>
<br>
<button class="plus">+</button>
Use display-flex on the button and use the value of line-height to position the plus or minus sign vertically within the button. Increase in line-height value moves the signs downward and and decrease in line-height value moves the signs upward. Thanks!
I am trying to make it so that the button that I have centered on the screen (when the screen is full size, it is centered) stays in the center while still scaling down to fit to smaller screens.
I have tried some of the answers I found here and other places about changing position: absolute; and wrapping the button in a div with text-align: center; and margin: auto; but so far the button ends up not staying centered.
Here is what I have:
.wrapper {
text-align: center;
margin: auto;
}
#mybutton {
position: absolute;
left: 37%;
text-align: center;
cursor: pointer;
bottom: 10%;
letter-spacing: .55rem;
max-width: 50%;
background: #3498db;
background-image: linear-gradient(to bottom, #3498db, #2980b9);
text-shadow: 1px 1px 3px #666666;
font-family: Arial;
color: #ffffff;
font-size: 30px;
padding: 10px 20px 10px 20px;
text-decoration: none;
border-color: #3498db;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
This is probably something very simple that I am missing, but it's late and I am tired of messing around with this, so if anyone can offer any help, it would be appreciated!
Make it simple. You just need text-align:center with width.
CSS i have used
width:50%;margin:0 auto;text-align:center;
see here
try this , it is working .
.button1 {
text-align: center;
}
.button1 a {
background-color: #03326c;
font-size: 25px;
height: 35px;
position: relative;
text-align: center;
display: inline-block;
color: white;
padding: .5em 1em;
}
<div class="button1">
<span class="Button1">BUTTON</span>
or you can put button also.
</div>
This is what I understood of your problem: you wanted to make a button that scaled in accordance with the screen size AND you wanted it to be be centered.
I've pretty much done what you've been trying to do and achieved this.
.wrapper{
text-align: center;
}
button{
width: 50%;
...
}
Assigned the text align center property to the button's parent div and assigned the button a relative width.
body {
position: relative;
}
button {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
<body>
<button>CLICK ME</button>
</body>
see my pen for further explanation on how I used transform property of css
This question already has answers here:
CSS circles without width or height? : Is this possible with pure CSS or not?
(4 answers)
Closed 7 years ago.
It appears setting my border-radius to either 50% or 100% didn't do the trick and gives the span tag a stretched appearance. Is it possible to get this circle perfectly symmetrical without setting a height or width to it?
span {
background: #232323;
border-radius: 50%;
color: #fff;
display: inline-block;
font-family: Arial, sans-serif;
padding: 6px;
}
<span>x</span>
A solution is to just set the width to the computed font height:
width: 1em;
span {
background: #232323;
border-radius: 50%;
color: #fff;
display: inline-block;
padding: 6px;
width: 1em;
text-align: center;
}
<span>x</span>
Something like this maybe?
span {
background: #232323;
border-radius: 100%;
color: #fff;
display: inline-block;
font-family: arial;
font-size: 20px;
text-align: center;
width: 1.35em;
padding-bottom:.2em;
}
span.medium {
font-size: 50px;
}
span.ridikulus {
font-size: 500px;
}
<span >x</span>
<span class="medium">x</span>
<span class="ridikulus">x</span>
To provide an alternative approach, instead of relying on border-radius, I was thinking about using a glyph • and position that on the span tag.
The size can be adjusted using font-size.
The big advantage is that you don't need to generate a perfect circle.
span {
color: #fff;
position: relative;
line-height: 1;
display: inline-block;
padding: 10px;
}
span:before {
content:'\02022';
color: #000;
font-family: sans-serif;
font-size: 10rem;
position: absolute;
z-index: -1;
line-height: 0;
left: -14px;
top: 20px;
text-shadow: 0 0 10px rgba(0,0,0,0.4);
}
<span>x</span>
I have a footer for my website, in which there are links which images below them, and both separate divs containing these overlap. Where the images and links overlap, the links are not-clickable.
Extracting the relevant code and making a JSFiddle out of it might take a little time, so I'm posting images, and I hope someone can help me out based on these:
The footer_info div containing the links:
The footer_row_0 div containing the images:
For my scenario, the following links do not work:
Privacy Policy
Terms & Conditions
Site Map
Affiliates
Specials
Wish List
Newsletter
I already tried setting z-index: 10 for footer_info, but it didn't solve the problem. And if I set a negative z-index value for footer_row_0, the row disappears.
footer_info computed CSS:
background-color: rgb(255, 255, 255);
background-image: none;
background-position: 50% 0%;
background-repeat: no-repeat;
clear: both;
color: rgb(84, 84, 84);
display: block;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-size: 12px;
height: 149px;
line-height: 18px;
margin-bottom: -75px;
overflow-x: auto;
overflow-y: auto;
padding-bottom: 20px;
padding-left: 0px;
padding-right: 0px;
padding-top: 20px;
width: 980px;
z-index: auto;
footer_row_0 computed CSS:
color: rgb(224, 224, 224);
display: block;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-size: 12px;
height: 150px;
line-height: 18px;
position: relative;
width: 980px;
z-index: 0;
Can someone tell me how to solve this issue ?
In the footer_info use the z-index with the position:
Add this css in the footer_info div:
position: absolute;
z-index:999 !important;
z-index worked with the position property.
Alright guys, after spending 1-2 hours on this, I've managed to find the a solution. Firstly, thanks to #Broken Heart for his help, because my answer is partially based on his. Also, I'm not making my own answer to get points or something (don't really care about them), but I'm only doing so, so that other people also stuck on this issue can see what the solution was.
Okay, so I firstly applied this CSS for footer_info div:
#footer_info {
z-index: 1 !important;
position: relative;
}
For the small silhouette images, I had a CSS class silhouette too. So I added the following to silhouette CSS class:
.silhouette {
z-index: 2;
}
With these two modifications, I was able to get the links to click, and the silhouette images were also fully seen.
footer_info {
background-color: rgb(255, 255, 255);
background-image: none;
background-position: 50% 0%;
background-repeat: no-repeat;
clear: both;
color: rgb(84, 84, 84);
position: relative; /* or absolute */
display: block;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-size: 12px;
height: 149px;
line-height: 18px;
margin-bottom: -75px;
overflow-x: auto;
overflow-y: auto;
padding-bottom: 20px;
padding-left: 0px;
padding-right: 0px;
padding-top: 20px;
width: 980px;
z-index: 9999;
footer_row_0 {
color: rgb(224, 224, 224);
display: block;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-size: 12px;
height: 150px;
line-height: 18px;
position: relative;
width: 980px;
z-index: 1;
}