`
/* 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.
Related
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>
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
I'm trying to figure out how to use Position: relative in order to keep an object (let's call it text) in the same place on the screen regardless of screen size.
When I use Position: relative, and set "left" to 30% for example... It's 30% of the screen. I'm trying to figure out how to put text on top of an image and set the text to be 30% left within the image. I need this to work regardless of the screen size. So far I have been unable.
Could someone explain to me how Position Relative and Position Absolute work in these kinds of situations? Or how this would best be handled?
Thanks!
Here's my JsFiddle, and here's the snippet
.center {
display: table;
margin: 0 auto;
}
body {
background-color: #27ae60;
}
.image {
position: relative;
width: 100%;
/* for IE 6 */
}
.element {
position: absolute;
top: 100px;
left: 30%;
width: 100%;
font-size: 45px;
font-family: 'Just Me Again Down Here', cursive;
}
.input {
/*color: blue;*/
outline: none;
border: none;
background-color: transparent;
position: absolute;
top: 220px;
left: 18%;
width: 480px;
height: 475px;
overflow: hidden;
font-size: 30px;
font-family: 'Just Me Again Down Here', cursive;
}
<img id='image' class='center' src='https://s13.postimg.org/li2l28a0n/White_Board.gif'>
<h1 class='element'>This is a header </h1>
<textarea id='text1' class='input' placeholder="Write your answer here."></textarea>
First we setup a div with a .desk class, desk will receive the desired background image, a fixed width and height, and it will margin 0 auto since the desk doesn't have a container.
The .header class doesn't need to be absolute, we use it within the desk which is already positioned relatively. We give it a little padding so it will fit in the desk image.
The .answer class is applied to the textarea element we give it a width 100%; since we use it within the .desk which already has pre-defined width, that means .answer will equip all of possible width within the desk.
A great tip is always think simple in CSS, understand the usage of position: absolute, when it's really necessary. By the way if you're unfamiliar with rem sizing, I suggest you take a look here: https://www.sitepoint.com/understanding-and-using-rem-units-in-css/
Good luck!
You can get the desired effect in a much simpler code.. have a look:
body {
background-color: #27ae60;
}
.desk {
position: relative;
background-image: url(https://s13.postimg.org/li2l28a0n/White_Board.gif);
width:560px;
height:839px;
margin: 0 auto;
}
.header {
padding: .5rem 0 0 2rem;
font-size: 2.5rem;
font-family: 'Just Me Again Down Here', cursive;
}
.answer {
width: 100%;
margin-left: 2rem;
outline: none;
border: none;
background-color: transparent;
overflow: hidden;
resize: none;
font-size: 2rem;
font-family: 'Just Me Again Down Here', cursive;
}
Fiddle: https://jsfiddle.net/y3h1ogms/5/
When set position: relative on an element, it will be positioned relative to the nearest positioned ancestor, where "positioned" according to MDN means:
A positioned element is an element whose computed position property is either relative, absolute, fixed or sticky.
In your example, the header is not a descendant of the image, so there's no way to position it relative to the image. What you might do instead is convert the <img> to a <div> set the background-image of your div to be the image URL. You would also need to explicitly set the width and height of the div.
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;
}
I want increase title tag size on mouse hover which is in anchor tag. so how can target to title.
kesar sisodiya
The title text is handled by the browser and is not made available to us. You could make your own title text handler with JavaScript, but I don't think that's a very good solution.
You can't increase the size of title property.
You can try using the tooltip provided by jQuery.
jQuery Tooltip example
You could use a div that displayed when you hover over your text.
<div class="custom_title_tag">This is the title</div>
then style it with css
a:hover .custom_title_tag {
background:black;
opacity: 1.0;
}
The first answer was pretty straightforward though. But you could just position it relative to the link title you want to show.
check this, hope it helps you
a {
color: #000;
text-decoration: none;
}
a:hover {
color: green;
position: relative;
}
a[title]:hover:after {
content: attr(title);
padding: 4px 8px;
color: #000;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background:#ccc;
}