My 'Click here to contact us!' button is sticking to the middle of the page instead of floating at the bottom, here is the code and an image attached. I recently faced an issue where the button was changing size on being clicked which was rectified, however now my problem is it floating in the middle of the page.
Is this a problem with a margin or height set?
* Call to Action */
.call-to-action {
background-color: #ffffff;
border: 1px solid #ffffff;
-moz-border-radius: 28px;
-webkit-border-radius: 28px;
border-radius: 28px;
display: block;
font-size: 17px;
font-family: 'Roboto, Sans Serif';
text-decoration: none;
color: #000000;
padding: 16px 31px;
position: absolute;
right: 50px;
bottom: 30px;
text-align: center;
transition: 0.5s;
margin: auto;
}
.call-to-action a:hover {
background-color: #C6DDF0;
border: 1px solid #C6DDF0;
}
.call-to-action a {
text-decoration: none;
color: #ffffff
}
.call-to-action:hover {
background-color: #C6DDF0;
}
<!--Button Bottom Right-->
<a href="mailto:example#example.com?subject=Envirma Education | Media Production Unit 6&body=To the attention of sir/madam,
Envirma Education | Media Production Unit 6" class="call-to-action">Click here to contact us! <i class="far fa-envelope-open"></i>
</a>
<!--End of Contact Call-To-Action-->
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>
I've made a landing page for my BTEC Media coursework, but I've ran into an issue with a button.
When I click on my call to action button the button grows in length. I've tried setting max-width to auto and altering margins but the same result.
Here is my CSS and HTML
HTML Code
<!-- Contact Button Bottom Right-->
<a href="mailto:fake#email.com?subject=Envirma Education | Media Production Unit 6&body=To the attention of sir/madam,
Envirma Education | Media Production Unit 6" class="call-to-action">Click here to contact us! <i class="far fa-envelope-open"></i>
</a>
<!-- End of Contact Call-To-Action-->
CSS Code
/* Call to Action */
.call-to-action {
background-color:#ffffff;
border:1px solid #ffffff;
-moz-border-radius:28px;
-webkit-border-radius:28px;
border-radius:28px;
display:inline-block;
font-size:17px;
font-family: 'Roboto, Sans Serif';
text-decoration:none;
color:#000000;
padding:16px 31px;
position: absolute;
display: block;
right: 50px;
bottom: 60px;
text-align: center;
}
.call-to-action a:hover {
background-color:#C6DDF0;
border:1px solid #C6DDF0;
}
.call-to-action a{
text-decoration: none;
color: #ffffff
}
.call-to-action:hover {
background-color:#C6DDF0;
}
.call-to-action:active {
position:relative;
top:1px;
}
Thanks for reading and any help provides.
This may be a really easy solve but I'm fairly new to programming and couldn't find any results online relating to my exact problem.
Photo of button expanding width on click.
Your active anchor class was sending your button to the top 1px. Just remove that and it no longer jumps. Perhaps you meant to drop the button by 1px when clicked. If so, try increasing the margin-top by 1px:
.call-to-action {
background-color: #ffffff;
border: 1px solid #ffffff;
-moz-border-radius: 28px;
-webkit-border-radius: 28px;
border-radius: 28px;
display: inline-block;
font-size: 17px;
font-family: 'Roboto, Sans Serif';
text-decoration: none;
color: #000000;
padding: 16px 31px;
position: absolute;
display: block;
right: 50px;
bottom: 60px;
text-align: center;
}
.call-to-action a:hover {
background-color: #C6DDF0;
border: 1px solid #C6DDF0;
}
.call-to-action a {
text-decoration: none;
color: #ffffff
}
.call-to-action:hover {
background-color: #C6DDF0;
}
.call-to-action:active {
position: relative;
}
<a href="mailto:fake#email.com?subject=Envirma Education | Media Production Unit 6&body=To the attention of sir/madam,
Envirma Education | Media Production Unit 6" class="call-to-action">Click here to contact us! <i class="far fa-envelope-open"></i>
</a>
Just remove the positioning on the active anchor class.
.call-to-action:active {
position:relative;
}
Removed the following anchor and took out the top tag as it was moving it on click/active.
.call-to-action:active {
position: relative;
}
Thanks to MichaelvE for the response.
I am trying to create a custom-made HTML based calendar that displays the past 5 days. I have not yet created the content to be updated once the user clicks on the different dates. I'm actually still stuck on the proper styling. Right now, in its static state, the first tab (the top tab) is selected. I have given it a class to make the font larger and thereby making its containing <li> element larger.
What I would like to do is have the user click on different tabs and have the background color updated to white. From the snippet below, you will see that I got that far. However the color scheme for the other tabs becomes tricky once the user clicks on any given tab. Right now it's a simple gradient, light at the top darker towards the bottom. But suppose the user clicked in the middle. Then the gradient would have to change to have the adjacent tabs directly above and below it to have the 2nd lightest coloring (the lightest would be the active tab, being white). In my css I tried to code that in intuitively by having a class called secondTab.
Question: How do I apply a dynamic color scheme as described above based on user click? In other words, whichever tab the user clicks on will be white, and all the other tabs will update the background-color based on their relational position to the active tab?
.secondTab {
background-color: #cbdeea;
}
.thirdTab {
background-color: #a6cdd9;
}
.fourthTab {
background-color: #77b4c9;
}
.fifthTab {
background-color: #519ab6;
}
.contentTitleSize {
font-size: 50px;
}
.contentTitle {
color: #000;
height: 73px;
margin-top: 27px;
font-family: Play;
}
.contentTitle, .contentArea {
display:inline-block;
}
.contentArea {
height:320px;
width:312px;
margin-left: 25px;
overflow: hidden;
}
.subheading {
font-size: 18px;
height: 20px;
font-family: Play;
color: #77b4c9;
margin-top: 14px;
margin-bottom: 24px;
}
.outerContainer {
width:566px;
display:inline-block;
vertical-align: top;
margin-right: 27px;
}
section {
display:block;
}
*, :after, :before {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
*, :after, :before {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
.tabPanel {
display:inline-block;
vertical-align: top;
width:160px;
margin:0;
padding:0;
}
ul {
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
li {
display:list-item;
}
.listTabs {
display:block;
list-style: none;
font-size: 22px;
font-family: Play;
text-align: center;
padding-top: 12px;
padding-bottom: 13px;
color: #fff;
cursor: pointer;
-webkit-box-shadow: inset 0 1px 2.5px 0 rgba(0,0,0,.11);
box-shadow: inset 0 1px 2.5px 0 rgba(0,0,0,.11);
}
.container {
height:320px;
width: 100%;
margin-bottom:24px;
border-radius: 2px;
background-color: #fff;
font-family: Roboto-Regular,serif;
line-height: 1;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.1)
}
.activeFont {
color:#77b4c9;
box-shadow: none;
transition: all .2s linear;
}
.activeTab {
background-color: #fff;
font-size: 50px;
margin-top: 15px;
display:block;
}
.bottomButton {
height: 61px;
background-color: #327ca3;
border-radius: 3px;
font-size: 20px;
font-family: Play;
letter-spacing: .4px;
color: #fff;
text-align: center;
line-height: 61px;
cursor: pointer;
}
<div class="outerContainer">
<section class="container">
<ul class="tabPanel">
<li class="listTabs activeFont" role="button" id="wotdDay0-select">
<span class="activeTab">02</span>
<span>OCT</span>
</li>
<li class="listTabs secondTab" role="button" id="wotdDay1-select">
<span>01</span>
<span>OCT</span>
</li>
<li class="listTabs thirdTab" role="button" id="wotdDay2-select">
<span>30</span>
<span>SEP</span>
</li>
<li class="listTabs fourthTab" role="button" id="wotdDay3-select">
<span>29</span>
<span>SEP</span>
</li>
<li class="listTabs fifthTab" role="button" id="wotdDay4-select">
<span>28</span>
<span>SEP</span>
</li>
</ul>
<div class="contentArea">
<a class="contentTitle contentTitleSize">Content Area</a>
<div class="subheading">
<span>
<strong>First</strong>
"Second and Third"::after
</span>
<span>more info</span>
</div>
<div class="A7AhX">
<p>lots of details</p>
</div>
</section>
<div>
<div class="bottomButton">
Click Me</div>
</div>
</div>
I am using below mentions css to show cutom radio buttons
input[type=radio]{
display:none;
}
.radio-options label::before {
content: "\2b24";
color:#e2e2e2;
display: inline-block !important;
width: 17px;
height: 17px;
vertical-align:middle;
margin-right: 8px;
background-color: #fff;
border: 1px solid #e2e2e2;
border-radius: 8px;
font-size: 9px;
text-align: center;
text-shadow: 0px 0px 3px #fff;
font-family: monospace;
padding-top: 1.8px;
line-height: 10px;
cursor: pointer;
}
.radio-options label.active-radio::before {
content: "\2b24";
color: #f9b410;
background-color: #fff;
font-size: 9px;
text-align: center;
text-shadow: 0px 0px 3px #fff;
font-family: monospace;
margin-left: 0px;
padding-top: 1.8px;
line-height: 10px;
}
<div class="radio-options">
<div class="col-md-6 col-xs-6">
<input id="some_thing" type="radio" >
<label ng-class="{'active-radio':true}">Something</label >
</div>
</div>
In desktop browser it's working correctly and showing radio button as
But in safari iOs its not displaying anything
Any suggestions what could be possible cause ?
It is because of the Unicode symbol you use as a content. It doesn't seem to appear on iOS. If you change to "Black Circle" instead it will work. (Just increase the font-size to compensate the size.)
Unicode Black Circle symbol
Similar issue
I'm using this hover effect for buttons, but in a few cases when the height changes, the top remains the same and the bottom moves up, instead of vice versa like it should. How can I make sure it always goes in the correct direction?
jsfiddle
.button {
box-sizing: border-box;
display: inline-block;
width: 215px;
height: 55px;
color: white;
font-family: $arial;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 1px rgba(43, 36, 36, 0.35);
letter-spacing: .1em;
border-radius: 3px;
position: relative;
background: #009ee0;
border: 1px solid #148fc6;
border-bottom: 4px solid #148fc6;
}
.button:hover {
border-bottom: 1px;
height: 53px;
}
.button span {
position: absolute;
width: 90%;
left: 0;
right: 0;
margin: auto;
top: 50%;
transform: translateY(-43%);
line-height: 1.2;
}
div {
padding: 20px 5px;
}
<div>
<a href="#" class="button">
<span>Wrong way</span>
</a>
</div>
<div>
<a href="#" class="button">
<span>I work fine</span>
</a>
<a href="#" class="button">
<span>I work fine</span>
</a>
</div>
You're reducing the height from 55px to 53px. That 2px has to go somewhere. The top button is just collapsing it. (The bottom two are doing the same, it just doesn't look like it because they are being affected by vertical text alignment). change your hover rule to this to accommodate for the height loss.
.button:hover {
border-bottom: 1px;
margin-top: 2px;
height: 53px;
}
https://jsfiddle.net/exd6hhvz/
I was able to make it work consistently by adding margin-top: 2px; to .button:hover
Here's an example: https://jsfiddle.net/vf03czp5/