Develop Reference

Button does slide-in and -out animations when I resize page (I don't want it to do that)

I'm trying to make a navigation button for my website that only appears when the site's at a certain size. It disappears and reappears when needed, but does a slide-in and -out animation that I definitely didn't code, and also lingers for ~0.5 seconds before disappearing. The nav button is also connected to simple Javascript that's supposed to bring up a pop-up overlay menu. I'm trying to get rid of both the resizing animation and the lingering 0.5 seconds.
The HTML for the button:
<button id="navbutton" onclick="openNav()">nav</button>
The CSS relating to the navbutton (note: everything I know about coding a website, I learned within the past 24 hours - if the code looks messy, that's because I don't know what I'm doing):
#navbutton {
width: 70px;
visibility: hidden;
background-color: #FFF6EA;
color: #545454;
border: 2px solid #545454;
padding: 13px;
text-align: center;
text-decoration: none;
float: right;
font: bold 16px/10px "IBM Plex Serif", serif;
margin: 4px 2px;
margin-left: 10px;
cursor: pointer;
border-radius: 30px;
}
#navbutton:hover {
background-color: #545454;
transition-duration: 0.4s;
color: #FFF6EA;
}
#media screen and (max-width: 850px) {
#navbutton {
visibility: visible;
margin-top: 20px;
}
}
The Javascript that connects to the overlay menu (the "navigation" div and "closeNav" button aren't linked here; I don't think the .js has anything to do with the unwarranted navbutton animations, but I'm adding it anyway in case it does):
function openNav() {
document.getElementById("navigation").style.display = "100%";
}
function closeNav(){
document.getElementById("navigation").style.display = "0%";
}
Also, the nav button currently doesn't do anything when I click it, despite it working a couple hours ago. I probably accidentally removed a detrimental piece of code, but that's not the point of this question - I'll figure it out/ask in another post. But if anything seems out of the ordinary, feel free to point it out.
I tried putting an extra float: right; after the navbutton turns visible, even though I know logically it doesn't do anything since it's already in the class (but a guy's desperate). I've also tried position: absolute; (and relative), because I thought "maybe this will make it stay in place and not move," but the animation is still there. I also tried deleting the transition-duration, but it didn't work.
To whoever can offer insight: I will owe you my firstborn. Thanks.

If you don't specify a transition-property value, the default value is all, which means that all properties that have a different value before and after the transition will be animated. However, if you explicitly set a transition-property value, only the specified properties will be animated. So I think this is your problem.Try setting the transition properties to only background-color and color.
function openNav() {
document.getElementById("navigation").style.display = "100%";
}
function closeNav(){
document.getElementById("navigation").style.display = "0%";
}
#navbutton {
width: 70px;
visibility: hidden;
background-color: #FFF6EA;
color: #545454;
border: 2px solid #545454;
padding: 13px;
text-align: center;
text-decoration: none;
float: right;
font: bold 16px/10px "IBM Plex Serif", serif;
margin: 4px 2px;
margin-left: 10px;
cursor: pointer;
border-radius: 30px;
transition-property: background-color, color;
transition-duration: 0.4s;
}
#navbutton:hover {
background-color: #545454;
color: #FFF6EA;
}
#media screen and (max-width: 850px) {
#navbutton {
visibility: visible;
margin-top: 20px;
}
}
<button id="navbutton" onclick="openNav()">nav</button>

Measuring the space that text takes up when it extends past the boundaries of the div

I've been relentlessly trying to resize the text of my buttons to fit within the parent div, and have had no success with fitty and other external plug-ins which work inconsistently or not at all.
I'm attempting to make my own simplified version that simply reduces the font-size of my answer_button_1_text element by 1px until it's smaller than the parent answer_button_1 element.
Using clientWidth returns 281 for answer_button_1 and 253 for answer_button_1_text regardless of if the text in the button extends past the boundaries.
How can I get the actual length of the text?
I've attempted to use the canvas.measureText method, but am unfamiliar with using canvases and when I apply a canvas to the entire HTML in this codepen, none of the elements on my screen are visible. I'm sure I'm making a basic mistake, but if anyone could help me find a way to return the actual space that my answer_button_1_text element takes up, I would really appreciate it.
Here is a codepen:
https://codepen.io/TheNomadicAspie/pen/oNWpZrg
Here is my code:
<button id="button" class="button lower-button">
<div id="button_text">Really long button</div>
</button>
<div id="question_text">Test</div>
body {
background-color: gray;
}
.button {
display: block;
position: relative;
height: 20%;
width: 10%;
background-color: black; /*Button Color*/
color: #f5f5f5;
font-family: open_sans;
font-size: 1.5rem;
font-size: min(6vw, clamp(1rem, 4.5vh, 4rem));
border-radius: 20px;
text-decoration: none;
box-shadow: 0.1em 0.2em black;
transition: 0.2s;
}
.lower-button {
white-space: nowrap;
}
#question_text {
position: absolute;
color: blue;
font-size: 40px;
margin-top: 100px;
}
const question_text = document.getElementById('question_text')
let text_var = button.clientWidth + ' ' + button_text.clientWidth
question_text.innerText = text_var

How do I create this hover button Using HTML, css and javascript

`
/* Button */
.button {
margin: 1em 0em;
}
.circle {
width: 50px;
height: 50px;
border-radius: 50%;
background: #1A718A;
position:relative;
}
.button h3{
position:relative;
top:3.4em;
left:.5em;
color: white;
font-weight: 400!important;
font-size:.9em!important;
z-index: 1;
}
.circle:hover {
position:relative;
top:1em;
left:3em;
}
<div class="button">
<div class="text"><h3>- View <span>Work</span></h3></div>
<div class="circle"></div>
</div> <!--button-->
`How do I create this hover button Using HTML, css and javascript.
The circle moves to the right(no effects) whilst the view turns grey and the work turns white(inverse).
Also a code newbie :)
Default State
Hover state
Thankyou

Recreation
HTML
We want to animate an element and its text "- View Work", so the simplest HTML we can have is:
<p>- View Work</p>
Styling
Default style
We can then style it as much as necessary. To place the line in the middle, we can trick a little by setting line-height to the element's height with a bit of JavaScript:
const p = document.querySelector('p');
p.style = '--height:' + getComputedStyle(p).getPropertyValue('height');
p {
position: relative;
border: 1px solid black;
color: black;
background-color: #f3f3f3;
width: 14rem;
height: 10rem;
font-weight: bold;
font-family: sans-serif;
text-align: center;
line-height: var(--height);
text-transform: uppercase
}
<p>- View Work</p>
With flashlight-effect
Now we want to add the circle, in which the text's color is different.
We could probably use mix-blend-mode in some way, however I don't understand it well enough to make it work with it.
Because of that, we fall back to using pseudo-elements (more specifically, ::after).
The pseudo-element needs to ...:
... have the same text in a different color, and have the texts overlap
... be big enough to fit the revealing circle in all its positions inside
... clip out the rest not inside the revealing circle
The first two bullet points are as simple as styling the pseudo-element and the parent mostly the same way.
To get the text, we can again use JavaScript by setting a custom data-attribute (e.g. data-text) to have the text. The pseudo-element can then display the text with content: attr(data-text).
For the revealing circle, we give the pseudo-element a background-color. Then, we use clip-path to cut out what should be "revealed".
And on hover, we transition between two different positions of the revealing circle.
const p = document.querySelector('p');
p.dataset.text = p.innerText;
p.style = '--height:' + getComputedStyle(p).getPropertyValue('height');
p {
position: relative;
border: 1px solid black;
color: black;
background-color: #f3f3f3;
}
p, p::after {
width: 14rem;
height: 10rem;
font-weight: bold;
font-family: sans-serif;
text-align: center;
line-height: var(--height);
text-transform: uppercase
}
p::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
color: white;
background-color: #1A718A;
clip-path: circle(3rem at 70px 55px);
transition: clip-path 0.15s;;
pointer-events: none;
}
p:hover::after {
clip-path: circle(3rem at 155px 100px);
}
<p>- View Work</p>
End note
This sample-code only works for one-liners, and requires the element to have a fixed size.
The effect can also be achieved by using mostly JavaScript, where one could mock-up such
a pseudo-element with actual HTML-elements, and then overlay said element over the original.

Adding bootstrap tooltip modifies the style of the element itself - how do I stop this happening?

JSFiddle here
I'm trying to add tooltips to an existing page. We already use bootstrap 2.3 so it seemed like the obvious choice.
My html looks like this, say:
<script>
//initialize tooltips
$(document).ready(function(){
$('.my_button').tooltip();
});
<div class="my_button_row">
buttonnnnn
</div>
and my CSS looks like:
.my_button_row{
height: 100px;
border-bottom: 1px solid #E5E5E5;
width: 500px;
display: table;
border-collapse: separate;
border-spacing: 20px 5px;
}
.my_button {
background: linear-gradient(to bottom, #3FACF5, rgba(56, 101, 131, 0.76)) repeat scroll 0% 0% #3498DB; border-radius: 34px;
box-shadow: 4px 4px 4px #666;
color: #FFF;
font-size: 26px;
padding: 10px 10px;
text-decoration: none;
display: table-cell;
margin: 10px;
white-space: normal !important;
word-wrap: break-word;
text-align: center;
vertical-align: middle;
height: 100px;
max-width: 180px;
min-width: 15%;
line-height:26px
}
.my_button_green{
background: linear-gradient(to bottom, #63F53F, rgba(79, 131, 56, 0.76)) repeat scroll 0% 0% #61DB34
}
When I mouseover the button, the tooltip displayed just as I wanted first time, but the styling on the button itself also appears to change - as you can see from the jsfiddle - how can I stop this from happening?
Edit: I really would prefer a solution that doesn't involve totally changing the way the page is laid out (i.e. 'just remove 'display:block from the container element' is a much less straightforward solution than this simplified JSfiddle would make it appear ) - a solution that doesn't modifying the HTML would be ideal.

Delete display: table; from .my_button_row{ ... or add
data-container="body" to
buttonnnnn

You just have to give width: 500px; to my_button class and remove
// max-width: 180px;
// min-width: 15%;
Check out the fiddle
EDIT:
According to your requirement from the comments:
Adjusted the padding instead of giving width statically
Updated Fiddle

Add display: block to .my_button.
You'll have to fiddle around with the margins and padding to get the text in the center of the button, but this will fix your issue. Also keep in mind that with display: block, the button will be at most 180px wide due to yourmax-width style.

Thats happening because you have used display:table-cell css property for the button while the tooltip is being appended as display:block element.
Simply use display:block for .my_button(or remove the display:table property from .my_button_row) and you are good to go
Updated fiddle

Don't let me change the css Google Chart

I have a table made with Google Chart that I've added styles to. The problem is that my padding style has less priority than the style from google's stylesheet.
What is .google-visualization-table-table *{}? Where does it come from?
A picture is worth a thousand words. > http://i.stack.imgur.com/bfhkY.jpg
Here's the code as well:
.google-visualization-table-table ) {
margin: 0;
vertical-align: middle;
padding: 2px;
}
// and my style code:
.tableHeaderCell {
border: 0;
color: #fff;
font-weight: bold;
white-space: nowrap;
padding: 0.75em 1.5em; // this is the line of code that doesnt overwrite the pre-existing padding of 2px;
}
html: <td class="tableHeaderCell google-visualization-table-sorthdr"></td>

It's because of the priority of CSS rule, I think you should try :
.google-vizualisation-table-table .tableHeaderCell{
padding: 0.75em 1.5em;
}

you can always add !important to override the .google-visualization-table-table code by doing:
.tableHeaderCell {
//other css styles here;
padding: 0.75em 1.5em !important;
}