Develop Reference

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.

Remove Bootstrap line height from all H1 tags

When I run this HTML / CSS, the bottom of the letters like y and g are clipped because of the line-height CSS inherited from the Bootstrap CSS.
.font2 {
font-family: 'Abril Fatface', cursive;
font-size: 12rem;
}
.gradient-text {
background-size: 100%;
background-repeat: repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
background-image: linear-gradient(45deg, #E9D66B, #4997D0);
}
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div>
<h1 class="font2 gradient-text">green yellow</h1>
</div>
<div>
<h1 class="font2 gradient-text">you get this</h1>
</div>
I thought I could maybe use JS - e.g.
var cells1 = document.querySelectorAll('h1');
for (var i = 0; i < cells1.length; i++) {
cell = cells1[i];
// remove the line height CSS attribute?
}
But maybe using JS is not the best option?
I don't want to specify a line height at all on the H1 tag.
How can I remove the line-height CSS attribute from all of the H1 tags?

Add a CSS override for line-height of H1.
h1 {
line-height: normal !important;
}
Updated the snippet also.
.font2 {
font-family: 'Abril Fatface', cursive;
font-size: 12rem;
}
.gradient-text {
background-size: 100%;
background-repeat: repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
background-image: linear-gradient(45deg, #E9D66B, #4997D0);
}
h1 {
line-height: normal !important;
}
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div>
<h1 class="font2 gradient-text">green yellow</h1>
</div>
<div>
<h1 class="font2 gradient-text">you get this</h1>
</div>

If I understand you correctly, then add these two rules (marked) to the font2 class. The height of the h1 tags will decrease significantly.
Or you can create CSS rules specifically for the h1 tag, and put these two rules there.
.font2 {
font-family: 'Abril Fatface', cursive;
font-size: 12rem;
display: inline; /*add this it*/
line-height: 100%; /*add this it*/
}
.font2 {
font-family: 'Abril Fatface', cursive;
font-size: 12rem;
display: inline; /*add this it*/
line-height: 100%; /*add this it*/
}
.gradient-text {
background-size: 100%;
background-repeat: repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
background-image: linear-gradient(45deg, #E9D66B, #4997D0);
}
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div>
<h1 class="font2 gradient-text">green yellow</h1>
</div>
<div>
<h1 class="font2 gradient-text">you get this</h1>
</div>

To change line-height, but not just line-height, to change anything to what you want, you just need to override it the correct way, putting !important isn't enough, the way browser reads classes and styles is it goes from left side to right side, so basically to override an existing class all you need to do it put the override class on the right most side when defining classes or use the style tag for small changes
example:
<div class="existing-class override-class" style="color:red;"/>
this code will start with the styles of existing-class and then it will go forward and use the override-class, so anything that overlaps between those 2 classes, browser will choose the later one, meaning override-class will overwrite styles from existing-class.
Now the style tag will overwrite both the existing-class and override-class's style and you will get color red even if you defined blue or black on either existing or override class, and thats how you can overwrite anything.

Line break and inject span with javascript

I need help. I'm trying to achieve this effect with the headings of a site.
I tried by using background color and padding, but when the text grows in two or more lines it makes a big rectangle. I'm trying to figure out a way to break lines automatically into spans using javascript.
can anyone help me, please?
thanks a lot!

Try this:
.padded-multiline {
line-height: 1.4;
padding: 2px 0;
width: 400px;
margin: 20px auto;
}
.padded-multiline span {
background-color: #c0c;
color: #fff;
display: inline;
padding: 0.45rem;
line-height: 60px;
/* Needs prefixing */
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
<h1 class="padded-multiline">
<span>How do I add padding to subsequent lines of an inline text element?</span>
</h1>

You can achieve it by adding line-height css property.
Here is the sample to achieve
.hero-banner {
background: url("https://www.tributemedia.com/hs-fs/hubfs/Images/Blog%20Images/shutterstock_252081805.jpg?width=2480&name=shutterstock_252081805.jpg");
background-size: cover;
width: 100%;
height: 200px;
padding: 20px;
}
.hero-banner span {
background: #e7415e;
color: #fff;
font-size: 55px;
line-height: 80px;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div class="hero-banner">
<span>Join our 2020 Welcome change tour</span>
</div>
</body>
</html>

If you want to achive this with CSS only then you need to set this element display attribute to inline like this:
display: inline;
You can also use the line-height CSS attribute together with the font-size to style the height of this p element (if you're using p for this text).
Make sure that line-height value is significantly bigger than the font-size.

Bootstrap, css How to change background

I am using this bootstrap:
http://ironsummitmedia.github.io/startbootstrap-simple-sidebar/#
I want to change this white background?
I've tryed in class wrapper, but it changed only background under content, rest od page under it was still white.
Thanks for help :)
#wrapper {background-color: red;...}
}

It's happening because the body, html and #wrapper height are not set to 100%, so add:
html, body { height: 100%; }
#wrapper { height: 100%; background-color: red; }

You will need to change the background-color property for body as well as the page-content-wrapper.

Try changing the page-content-wrapper class. It will change the background of the white part, but you may want change the color on the body too.

if you inspect the body css are this,
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff; //change the color
Just try to inspect and edit it until you get what you want.

Apparently have rules #wrapper and also in the body, try this way:
#wrapper {
...
background-color: #eee;
}
body {
...
background-color: #eee;
}
I hope i´ve helped.

Change elements in a class one-at-a-time?

I'm working on a reference project with tooltip notes throughout a text, and I'd like for the text affected by a note to be highlighted when the tooltip is displayed. My current code has a bug where displaying the first note highlights the correct text, but displaying a subsequent note highlights the text from the first note, not its own. I'm new to Javascript so it's likely I made a rookie mistake, but I think the problem is that I'm using getElementById which can only work once, but if I should be using getElementsByClassName instead, how do I tell it which node to get when? I know getElementsByClassName returns the whole array, and I need a way to only return one node at a time. I haven't yet been able to figure it out myself so help is very much appreciated. Below is a pared-down example of my code that demonstrates my problem.
<!DOCTYPE html>
<html>
<head>
<style>
mark {
background-color: white
}
/* now <mark> is only effective at my discretion */
sup {
vertical-align: text-top;
font-style: italic
}
a:link {
text-decoration: none
}
a:visited {
color: blue
}
a:hover {
text-decoration: underline
}
/* these describe the appearance and behavior of tooltips */
a.tooltips {
position: relative;
display: inline
}
a.tooltips span {
position: absolute;
width: 70px;
color: #FFFFFF;
background: #000000;
height: 25px;
line-height: 25px;
text-align: center;
visibility: hidden;
}
a:hover.tooltips span {
visibility: visible;
font-size: 0.8em;
top: 22px;
left: 50%;
margin-left: -43px;
z-index: 999;
}
a.tooltips span:after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
width: 0;
height: 0;
border-bottom: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
</style>
<script>
function seeNote() // <mark> is now activated
{
document.getElementById("note").style.backgroundColor = "yellow"
}
function hideNote() // <mark> is now deactivated
{
document.getElementById("note").style.backgroundColor = "white"
}
</script>
<title>Bug Demonstration</title>
</head>
<body>
Mousing over note <i>a</i> highlights
<a class="tooltips" href="#"><sup onmouseover="seeNote()" onmouseout="hideNote()">a</sup><span>note <i>a</i></span></a>
<mark id="note">affected text</mark> as intended,
<br> but mousing over note <i>b</i> highlights
<a class="tooltips" href="#"><sup onmouseover="seeNote()" onmouseout="hideNote()">b</sup><span>note <i>b</i></span></a>
<mark id="note">note <i>a</i>'s text</mark> instead of note <i>b</i>'s text.
</body>
</html>

Problem solved! I saw something similar to my intended effect done on another website and looked at its source; it turns out there's a way to do this without any scripting at all! The whole effect can be accomplished merely with extra styling of the <a> elements in CSS, like so:
a. Delete all JavaScript
b. Delete all <mark> tags and their CSS and move each </a> to replace each </mark>
c. Delete href="#" from all <a> tags
d. Insert this code into the CSS:
/* affected text highlighted... */
a:hover.tooltips {
background-color: yellow;
}
/* ...but not the superscript letter */
a:hover.tooltips sup {
background-color: white;
}