I'm quite new to web development and am making a website for myself. I've come across an issue regarding buttons on my website where the text underline for a button doesn't go away. For some reason, even after applying text-decoration: none !important; it's still there.
A bit of background on what I'm trying to do
I've added two buttons that look the same, but they link to different things. This is because I want the links to change on mobile. In the CSS media query I've specified which button displays on mobile devices. The original buttons are fine, but the ones I want to use on mobile devices have a purple underline for some reason.
I'd love some help to have this sorted out because the underline makes the button look a bit odd when displayed on mobile. I've attached some images and code for one of the buttons below.
Images:
Code:
This is the HTML for a pair of the buttons:
<div class="cont3_left_wrapper">
<h2 class="hd2_1">Header Text</h2>
<p>
Body Text
</p>
<a href="#/" id="header_button_3">
<button type="button" class="btn_chat">Let's Chat</button>
</a>
<a href="#/" id="header_button_3_mob">
<button type="button" class="btn_chat_mob" onClick="location.href='contact.html'">Let's Chat</button>
</a>
</div>
This is the CSS for the buttons:
.btn_chat {
padding: 13px 0 11px 0;
background-color: #E84855;
border-radius: 4px;
border: none;
text-decoration: none;
text-align: center;
font-size: 24px;
font-weight: 700;
color: white;
box-shadow: 0px 2.0407px 20.407px rgba(0, 0, 0, 0.25);
margin-top: 35px;
width: 270px;
}
.btn_chat_mob {
display: none;
padding: 13px 0 11px 0;
background-color: #E84855;
border-radius: 4px;
border: none;
text-align: center;
font-size: 24px;
font-weight: 700;
color: white;
box-shadow: 0px 2.0407px 20.407px rgba(0, 0, 0, 0.25);
margin-top: 35px;
width: 270px;
}
#media screen and (max-width: 480px) {
.btn_chat {
display: none;
width: 100%;
}
.btn_chat_mob {
display: block;
width: 100%;
text-decoration: none !important;
}
}
.btn_chat_mob {
display: inline-block;
width: 100%;
}
Since Your button is inside [a tag] and it has underlined as default CSS you should apply following CSS to [a tag] also it should work..
a {
text-decoration: none;
outline: none;
}
a:hover {
outline: none;
}
a:focus {
outline: none;
}
Related
Simply put, I want to make an icon button with text that downloads a file when the user clicks it, and my html code isn't doing that. The twist is, I have an icon button elsewhere on my page to do that exact same thing, and that one works.
The reason I'm including this ability twice in my page is because I want the user to be able to download this file no matter where they are in the page. The icon-button-with-text is the expected go-to place to get the file because it has an icon and text explaining what the button does. Here's its example code:
button {
cursor: pointer;
height: 56px;
width: 214px;
margin-bottom: 5%;
border-radius: 4px;
font-family: sans-serif;
font-size: 16px;
line-height: 56px;
filter: drop-shadow(2px 2px 4px rgb(0 0 0/0.75));
}
.button1 {
background: none;
border: none;
outline: 2px black solid;
padding-left: 8.2%;
}
.button1 a {
color: black;
}
.button1 a:hover {
cursor: pointer;
}
.button1 span {
position: absolute;
top: 0px;
left: 42px;
}
.activeState {
display: none;
}
.inactiveState {
position: absolute;
height: 18px;
width: 18px;
top: 8px;
left: 16px;
}
.button1:active .activeState {
display: inline-block;
position: absolute;
height: 18px;
width: 18px;
top: 8px;
left: 16px;
}
.button1:active .inactiveState {
display: none;
}
<button class="button1">
<a href="files\downloadableFile.pdf" download>
<img class="inactiveState" src="graphics\downloadFile_inactive.svg">
<img class="activeState" src="graphics\downloadFile_active.svg">
<span>
Download File
</span>
</a>
</button>
However, the icon-button-with-text is part of the body content, and so will scroll up and out of sight as the user goes through the page. So that the user can download the file no matter where they are in the page, I made an icon-button in my fixed top app bar. Here's its example code:
li {
list-style-type: none;
}
.icon {
width: 24px;
height: 24px;
padding-top: 8px;
text-align: center;
}
.inactiveState {
height: 24px;
width: 24px;
top: 16px;
filter: drop-shadow(2px 2px 4px rgb(0 0 0/0.75));
}
.activeState {
display: none;
height: 24px;
width: 24px;
top: 16px;
margin-left: 12px;
filter: drop-shadow(2px 2px 4px rgb(0 0 0/0.75));
}
li:active .inactiveState {
display: none;
}
li:active .activeState {
display: block;
margin-left: auto;
margin-right: auto;
}
li:hover {
cursor: pointer;
background: none;
outline: 2px black solid;
border-radius: 4px;
}
<li class="icon downloadResume">
<a href="files\downloadableFile.pdf" download>
<img class="inactiveState" src="icons\downloadFile_inactive.svg">
<img class="activeState" src="icons\downloadFile_active.svg">
</a>
</li>
The icon-button was part of a menu of other links, so I made it a list item instead of an actual button.
Both buttons have the same icons and the same link states for those icons. Aside from the icon-button not having text and being a list item instead of a button proper, I don't see any difference between the two.
And yet, when I click on the icon-button, my file downloads. When I click on the icon-button-with-text, the icon state also changes like it's supposed to, but the file doesn't download. There's not even a snackbar in the corner mentioning the address of the file when I hover over the icon-button-with-text, whereas that happens when I hover over the icon-button.
Why is this happening, and what can I do so that the same file downloads from the two buttons?
Thank you in advance!
You must not wrap an anchor in a button. Both elements are clickable, so behavior is not really consistent accross browsers ¹ ²
Alas, W3C's validator reports an error when nesting those elements, so it simply is not valid HTML.
Error: The element a must not appear as a descendant of the button element.
<button>stackoverflow</button>
Instead, replace your button with a div:
<div class="button1">
<a href="files\downloadableFile.pdf" download>
<img class="inactiveState" src="graphics\downloadFile_inactive.svg">
<img class="activeState" src="graphics\downloadFile_active.svg">
<span>
Download File
</span>
</a>
</div>
And of course change your CSS accordingly:
div.button1 {
cursor: pointer;
height: 56px;
width: 214px;
margin-bottom: 5%;
border-radius: 4px;
font-family: sans-serif;
font-size: 16px;
line-height: 56px;
filter: drop-shadow(2px 2px 4px rgb(0 0 0/0.75));
}
.button1 {
background: none;
border: none;
outline: 2px black solid;
padding-left: 8.2%;
}
/* ... */
If file's path is files\downloadableFile.pdf then in href="" set the path and in download="" set the file.
<a href="files" download="downloadableFile.pdf">
<img class="inactiveState" src="icons\downloadFile_inactive.svg">
<img class="activeState" src="icons\downloadFile_active.svg">
</a>
As I said, depending on what browser I'm using, the button varies for some reason.
Here's the code I'm using right now-
HTML-
<input type="button" id="submitButton" onclick="generateLink()" value="Go" />
CSS-
#submitButton {
display: block;
color: white;
background-color: #8373e6;
font-size: 26px;
font-family: "Raleway", sans-serif;
font-weight: 400;
outline: none;
border: 3px solid #8373e6;
padding: 5px 15px;
margin: 20px;
border-radius: 30px;
box-shadow: 0 0 20px #9c9c9c67;
width: min-content;
cursor: pointer;
}
#submitButton:hover {
background-color: #6b5ebd;
}
#submitButton:active {
background-color: #554a97;
}
Whenever I look this up on the live server on my Windows PC (on both Firefox and Chrome), it looks the way I want it to. But when I deploy the test site on Firebase and check it out on my mobile phone (iPhone with Safari Browser), The text "Go" is gone and all I can see is a flat, text-less button.
I have also tried changing the <input> tag to a <button> tag, adding a display: block; and a bunch of other stuff but it doesnt seem to work.
Any idea why this could be happening?
Please and thanks.
Have you tried using anchor element ?
Go
a{
display: block;
color: white;
background-color: #8373e6;
font-size: 26px;
font-family: "Raleway", sans-serif;
font-weight: 400;
outline: none;
border: 3px solid #8373e6;
padding: 5px 15px;
margin: 20px;
border-radius: 30px;
box-shadow: 0 0 20px #9c9c9c67;
width: min-content;
text-decoration:none;
}
a:hover {
background-color: #6b5ebd;
cursor:pointer;
}
a:active {
background-color: #554a97;
}
I have a navbar and a button defined in HTML like this :
<div class="topnav">
<a class="active" href="#home">Hooligans</a>
<button class="button"><p style="font-family:courier;">drop dead</p></button>
</div>
The CSS for the above goes like this :
.topnav {
background-color: #F9FAFA;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #BA55D3;
text-align: center;
padding: 8px 5px;
text-decoration: none;
font-size: 3vw;
}
.button {
background-color: #F9FAFA;
border: 2px solid #BA55D3;
border-radius: 5%;
color: #BA55D3;
text-align: center;
margin-left: 70%;
display: inline-block;
}
Right now, the best I can do is the button to fit exactly inside navbar. I want it to be smaller than the navbar like the Signup button in the stackoverflow navbar.
When I set height of the button the text inside the button goes out of the border and when I try padding the button goes bigger.
Any help ?
Remove the <p> tag inside the button, that is what's causing the unexpected margins. Also, I added display: flex to center align the items in the nav:
.topnav {
background-color:#F9FAFA ;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
overflow: hidden;
display: flex;
align-items: center;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #BA55D3 ;
text-align: center;
padding: 8px 5px;
text-decoration: none;
font-size: 3vw;
}
.button{
background-color: #F9FAFA ;
border:2px solid #BA55D3;
border-radius: 5%;
color:#BA55D3;
text-align: center;
margin-left: 70%;
display: inline-block;
font-family: courier;
font-size: 1vw;
}
<div class="topnav">
<a class="active" href="#home">Hooligans</a>
<button class="button" >drop dead</button>
</div>
I have two buttons where I tried to put next to each others but for some reason is not working right. Can anyone check out my CSS code below to see if everything okay, if not I will be thankful if anyone can fix it?
Here is my code:
<a class="back" href="#">Back</a>
<a class="delete" ng-click="">Confirm</a>
CSS
a.back, .delete {
background: #00b7ff;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
color: #fff;
display: block;
font-weight: bold;
margin: 0 0 20px;
padding: 14px 0;
text-align: center;
width: 200px;
}
a.back:hover {
background: #00b7ff;
text-decoration: none;
}
Change display: block; to display: inline-block;:
a.back,
.delete {
background: #00b7ff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
color: #fff;
display: inline-block;
font-weight: bold;
margin: 0 0 20px;
padding: 14px 0;
text-align: center;
width: 200px;
}
a.back:hover {
background: #00b7ff;
text-decoration: none;
}
<a class="back" href="#">Back</a>
<a class="delete" ng-click="">Confirm</a>
Change display: block;
to display: flex;
you can use display flex to organise your buttons for more information go to this link here
You may encounter mysterious white space between buttons if you use inline blocks as the accepted answer suggests. It is caused by natural white space between inline elements (imagine the white spaces between letters). To remove it, the simplest way is to put the ending tag and beginning together, such as:
<a class="back" href="#">Back
</a><a class="delete" ng-click="">Confirm</a>
There are several other methods, but I found this one the easiest. To learn more, check this good article.
I am having a frustrating CSS problem- basically I have an image that needs to be exactly inline (not above or below) text that I have all within an a href. HTML-
<li><img class= "emoji" src="../images/emojis/1f642.png"/><p class="emojiText">Pretty good</p></li>
produces this:
You can see that the image is the right size but slightly too far up from the text. I have rearranged my html and stuck the text within its own <p>, moved the image, everything. Nothing has worked. My current CSS:
.emoji {
height: 18px;
width: 18px;
margin-top: 8px;
margin-right: 8px;
margin-left: 5px;
}
.emojiText {
margin-bottom: 10px;
display: inline;
}
.status li a {
text-indent: 5px;
display: block;
width: 250px;
color: white;
height: 35px;
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
text-align: left;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
border-top: 1px solid rgba(255, 255, 255, 0.3);
background-color: rgba(255, 255, 255, 0.1);
position: relative;
padding-top: 0px;
text-decoration: none;
}
the last block affects both but no matter how I play with the margins I can't fix the image-text align problem. What can I do to fix this?
EDIT:
If you want the emoji and text to align their center-points...
.emoji,
.emojiText {
display: inline-block;
vertical-align: middle;
}
This is what you expecting...
<style>
a { display:inline-block; background:#52D4A4; text-align:center; text-decoration:none; padding:10px; }
a img { display:block; margin:0 auto; }
</style>
<img src="http://www.cmegroup.com/etc/designs/cmegroup/cmegroupClientLibs/images/iconFacebook.png">Pretty good