Basically, the button border is not covering all the text inside it.
How do I get it to cover all the text?
I have bootstrap installed and using it for some other components. Is it possible that bootstrap is interfering with this or something?
I have tried padding like many sites suggest, but it's not working.
<a target="_blank" href="/SignUp">
<button className="btn-design">Join BridgeBurma Today</button>
</a>
This is the css
.btn-design{
background-color: orange;
color: red;
text-align: center;
display: inline-block;
cursor: pointer;
border-radius: 20%;
white-space: nowrap;
}
Everyone shows you some CSS solutions but in my opinion the worst mistake with the code here is the nested button inside the a Tag. This doesn't make sense and should be avoided at all costs since they are for completely different, yet related functionality. Both trigger some action on click and combining them can lead to unpleasant side effects.
<a target="_blank" href="/SignUp">
<span classe="btn-design">Join BridgeBurma Today</span>
</a>
This would be a semantic valid HTML Markup, maybe you don't need span for this:
.btn-design{
background-color: orange;
color: red;
text-align: center;
display: inline-block;
cursor: pointer;
border-radius: 20%;
white-space: nowrap;
padding: 10px;
}
<a target="_blank" href="/SignUp" class="btn-design">
Join BridgeBurma Today
</a>
Remove Name in className and it'll work like charm, see below
.btn-design{
background-color: orange;
color: red;
text-align: center;
display: inline-block;
cursor: pointer;
border-radius: 20%;
white-space: nowrap;
}
<a target="_blank" href="/SignUp">
<button class="btn-design">Join BridgeBurma Today</button>
</a>
Related
I'm only just learning html and have a question about linking a button. Could you tell me what I am doing wrong here?
</style>
<body>
<button onClick="name.html" class="button" ><span>name </span> </button>
<br>
In your application you should rather use an anchor link, because the button mostly used in forms. The corresponding HTML tag is <a>.
If you want to make your link look like a button you can give it a class and design it with CSS.
name
<style>
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
</style>
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.
How remove this line beetween buttons? First time I have this situation. Please look at my code here:
<a href="#info-section">
<button class="cta-btn rg">WATCH</button>
</a>
<a href="#info-section">
<button class="cta-btn lf">LEARN MORE</button>
</a>
My CSS responsive for buttons:
.cta-btn{
padding: 15px;
border-radius: 30px;
width: 150px;
font-size: .8em;
color: #fff;
background-color: inherit;
border: 1px solid #fff;
margin-top: 20px;
&:hover{
cursor: pointer;
}
}
.rg {
margin-right: 10px;
}
.lf{
margin-left: 10px;
}
I think that line is the underline of the A-tags.
Try adding text-decoration: none; to your <a>. Like this:
a {
text-decoration: none;
}
It could also be possible you forgot to close an A-tag before this part of your code. So check if every <a> has an closing </a>
I assume it's to do with the way you have the <a> tags surrounding the <button> but changing it to <button class="cta-btn rg">WATCH</button> removes the underline. It's almost as if there's a space character that it's formatting.
Note, this isn't the correct way to do it, but it removes the underline.
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.
I'm trying to center a button that is an <a> tag. However, the only thing that will work is the <center> tag. I've tried using <a style="text-align: center">Button</a> and <a align="center">Button</a>, but none of the two worked. Why is it that only the center tag works?
My CSS is this:
.btn {
color: white;
background-color: orange;
padding: 5px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
text-decoration: none;
transition: 200ms all;
}
.btn:hover {
background-color: #FFC964;
color: white;
cursor: pointer;
}
HTML:
Button
The <center> tag is deprecated and is most likely to be removed in all the browsers. And <a> tag is inline in nature, so text-align: center should be given for it's parent block element:
.make-center {text-align: center;}
<div class="make-center">
I am a link
</div>
In the above code, the <div class="make-center"> tag acts as a <center> tag.
Does your a element have the .btn class?
Try adding this CSS to it:
display:block;
margin:0 auto;
Otherwise, create a jsfiddle for us which reproduces the problem. You are not showing your entire CSS and markup.