I have a 'Download' button on my HTML webpage and I have set some attributes for it.
Whenever I refresh my page, the button appears like this, very rarely:
Text Outside the Button
But then, it will look like this and this is the normal-looking button:
Normal Button
.navbar-download-btn {
position: absolute;
right: 4%;
top: 5.7%;
color: white;
background-color: blue;
border: 2.2px solid white;
padding: 0.8%;
border-radius: 3.5px;
outline: none;
cursor: pointer;
font-weight: bolder;
font-family: Noto Sans KR, sans-serif;
letter-spacing: 0.7px;
transition: 0.7s;
}
<button class="navbar-download-btn nonindex">Download</button>
I think there might be a problem in the padding of the download button, Increase the padding from the right and also try running this code in other browsers, this had been a problem for me too earlier but sometimes it could just be your browser...
text-align: center;
margin-right:
Related
When I hover over the button, it stops displaying "Middle School" and instead just becomes a white bar. How do I fix this without using
.buttonM {
width: 100%;
/* set a width so it doesnt change upon hover */
border: 1px solid #fff;
background: #de5426;
padding: 3px 21px;
color: #ffffff;
font-size: x-large;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
vertical-align: middle;
letter-spacing: 1px;
font-weight: bolder;
font-family: "montserrat";
}
.buttonM:hover span {
display: none
}
.buttonM:hover {
background-color: #fff;
color: #de5426;
cursor: pointer;
}
.buttonM:hover:before {
content: "Middle School";
}
<button class="buttonM">
<span>Middle School</span>
</button>
I understand you confusion. I was this confused when I started too.
anyway, you don't need to add span in a button unless you have a purpose for that.
the problem happens because you added hover to the span and to the button. so my advice is to minimize your code as much as possible. you also added two font family for the button. don't do that. also don't add cursor: pointer in the hover. you should put it in the button style, not its hover.
here is a working button from your code and I hope it's what you need.
.buttonM {
width: 100px;
height: fit-content;
background: #de5426;
color: #fff;
font-size: x-large;
font-family: Arial, Helvetica, sans-serif;
cursor: pointer;
}
.buttonM:hover {
background-color: #fff;
color: #de5426;
}
<button class="buttonM">
<span>Middle School</span>
</button>
I am using https://element.eleme.io/#/en-US/component/radio and I am trying to change the font-size.
Below is my radio button. I want to change the font fize from the default 14px to 20px.
<el-radio-group class="radio-buttons" v-model="choiceOfDelivery" #change="getSelectedItem">
<el-radio-button label="Delivery" name="delivery_choice">
<br>
{{ $t("Delivery") }}
<br><br>
</el-radio-button>
<el-radio-button label="Pick up" name="delivery_choice">
<br>
{{ $t("Pick Up") }}
<br><br>
</el-radio-button>
</el-radio-group>
Below is the section that can change the font size while inspecting elements in Google Chrome.
.el-radio-button__inner {
line-height: 1;
white-space: nowrap;
vertical-align: middle;
background: #FFF;
border: 1px solid #DCDFE6;
font-weight: 500;
border-left: 0;
color: #606266;
-webkit-appearance: none;
text-align: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
cursor: pointer;
-webkit-transition: all .3s cubic-bezier(.645,.045,.355,1);
transition: all .3s cubic-bezier(.645,.045,.355,1);
padding: 12px 20px;
font-size: 20px;
border-radius: 0;
}
However, when I do the same thing in my code, and refresh the page, the css style did not take place.
<style lang="scss" scoped>
.el-radio-button__inner {
font-size: 20px !important!
}
</style>
I am guessing if I am referring to the class correctly, but I couldn't find any examples specifically related to element UI.
Any suggestions? Thank you!
`Hi, I'd like to make a button with two lines of text and have them in different font sizes... Is there any way? My current way was trying it with an kind of designed button. Could that work in some way? Any help is appreciated! Beneath you see what I'm working with right now... I want to have a second line under "START" which is displayed in a much smaller font size
<a class="smallbtn">START</a>
.smallbtn {
font-family: "Lato Light";
background-color: #58B947;
border-radius:5px;
color: white;
padding: 15px 6px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 21px;
width: 73%;
cursor: default;
margin-bottom: 5px;
}
you could do this if you just want to add a new line of text under your "START"
<a class="smallbtn">START<br><sub>hello</sub></a>
or
p{
font-size:12px;
padding:0px;margin:0px;}
<a class="smallbtn">START<br><p>hello</p></a>
You can try insert a div inside the button, give an id to the element and add css, like this:
<a class="smallbtn">START<div id="smallbtnFont">hello</div></a>
#smalbtnFont{
font-family: "arial";
font-size: 1em;
}
good question, heres how:
button {
font-family: "Lato Light";
background-color: #58B947;
border-radius:5px;
color: white;
padding: 15px 6px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 21px;
width: 73%;
cursor: default;
margin-bottom: 5px;
}
<button>Start<br><small style="font-size:50%;">Now</small></button>
I have a website where users can submit posts, when they do it they recieve alert message (success or warning). Im displaying alert messages on top of the page and im using position: absolute so that it can't move things around when it pops up. And everything is great and its all working but my SIGN UP/OUT button is showing inside my alert box and not behind it like my whole navigation.
Here is it how Sign Up button is showing in front of alert message
And I want the Sign Up/Out button to show behind the alert message, like other navigation elements.
Sign up button css:
.navbar-brand, .navbar-inverse .navbar-nav > li > a {
color: #778489;
text-shadow: 0 0px 0 rgba(0, 0, 0, 0.0);
font-weight: normal;
text-transform: uppercase;
font-size: 15px;
letter-spacing: .05em;
position: relative;
}
li.sign-up {
background: transparent;
border: none;
font-weight: 400;
border-radius: 0px;
box-shadow: none;
color: #ffffff;
text-decoration: none;
text-shadow: none;
padding: 0px 8px;
text-transform: uppercase;
}
Alertbox CSS
.alertMsg {
font-size: 16px;
line-height: 1.5em;
display: flex;
justify-content: center;
width: 100%;
transition: background 0.5s ease 0s;
height: 55px;
padding: 12px;
position: absolute;
}
.alertMsg i {
font-size: 18px;
margin-right: 10px;
margin-bottom: 5px;
}
Sign up HTML:
<li class="sign-up"><a data-toggle="modal" href="#signOut"><span class="white">Link Text</span></a></li>
I will be really thankful for any help, I've been dealing with this problem for some time. Have a great day!
Try using z-index which specifies the stack order of HTML elements. If one z-index is higher than another z-index then it will stack on top of it like a layer. Let me know if this works out. Also feel free to post up a a working demo of your code for better troubleshooting.
.navbar-brand, .navbar-inverse .navbar-nav > li > a,
li.sign-up{
z-index:3000; /* Number doesn't matter as long as it's higher than the .alertMsg z-index */
}
.alertMsg,
.alertMsg i{
z-index:9999; /* Will be above anything below 9999 */
}
I have a list of CSS to format my link button but it appears only working in Chrome but not IE, any ideas, the hover and everything works just not the link itself
thanks in advance
CSS
.button {
background-color: #4CAF50;
border-radius: 50%;
width: 170px;
height: 170px;
color: white;
padding: 4px 8px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
position: absolute;
margin-top: 0px;
margin-left: 400px;
background-color: white;
color: white;
border: 4px solid #83b739;
}
.button1:hover {
background-color: #83b739;
color: white;
}
HTML
<button class="button button1">link</button>
It's probably not even a CSS issue, but rather an issue with nesting interactive elements like that.
Don't put a link inside a button. That's just bizarre. Use just the <a> element and style that.
I'm not exactly sure what would have caused your problem, however is is most likely due to a css/html nesting problem, where multiple css styles interact with the nested elements differently on different browsers? It is better to simply remove the button element in the html and just style the <a> tag to look like a button. By doing this the code is less complicated, you should have fewer problems with styles and nested elements, and this is how most make link buttons anyway. Here is an example of how I made a link button in a recent project, some of the stylings are missing (custom fonts, etc) but it shows that you don't need the button tag, it works better without it, and how to make a button with just the <a> tag.
.btn:link,
.btn:visited {
display: inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
color: white;
border-radius: 200px;
border: 3px solid #1A75BB;
margin: 20px 20px 0px 0px;
transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.btn:hover,
.btn:active {
background-color: #14598e;
border-color: #14598e;
}
.btn-full:link,
.btn-full:visited {
background-color: #1A75BB;
margin-right: 20px;
}
.btn-full:hover,
.btn-full:active {
background-color: #14598e;
}
.btn-ghost:link,
.btn-ghost:visited {
color: black;
border-color: #14598e;
}
.btn-ghost:hover,
.btn-ghost:active {
color:white;
}
Why use AnyMath?
What problems can AnyMath solve?
It’s not just about IE. Such link-inside-button does not work in Firefox too.
If you really (think twice) need this to be a button instead of just a link, remove the explicit link from your button and wrap the button in a simple form:
<form action="http://example.com/">
<button class="button button1" type="submit">link</button>
</form>
But based on your code, button element is unneeded, and you should just use a link instead:
<a href="http://example.com/" class="button button1">link</button>