"Enhance your website with a dynamic hover effect and striking letter spacing in

In the div below, there is a span with the following code:

<div class="mission-button"><span class="mission">view our mission</span></div>

Accompanied by this CSS:

.mission-button::before {
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 1s;
    border-left-width: 2px;
    border-right-width: 2px;
    border-left-style: solid;
    border-right-style: solid;
    background-color: transparent;
    border-color: var(--main-dark); 
    animation: borderOnLoad 2s forwards;
}

@keyframes changeColor {
    0% {
        letter-spacing: 0px;
        color: white;
    }
    100% {
        letter-spacing: 2px;
        color: var(--main-dark);
    }
}

@keyframes borderOnLoad {
    0% {
        width: 100%;
        border-left-width: 3px;
        border-right-width: 3px;
        height: 100%;   
        top: 0;
        color: white;
        background-color: var(--main-dark);
    }
    50% {
        width: 200%;    
        left: -150px;
        border-left-width: 3px; 
        border-right-width: 3px;    
        height: 100%;   
        top: 0;
        color: white;
    } 
    100% {
        width: 65%;
        left: -150px;
        border-left-width: 200px;
        border-right-width: 200px;  
        height: 1px;
        top: 30px;
        color: var(--main-dark);    
        background-color: transparent;
    }
}

.mission-button {
    padding: 20px;
    /* background-color: #083958;*/
    cursor: pointer;
    width: 50%;
    position: relative;
    margin-top: 20px;   
    font-size: 20px;
    text-align: center;
}

.mission {
    letter-spacing: 0px;    
    -webkit-transition: all 1s ease;    
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    cursor: pointer;
    animation: changeColor 2s forwards;
}   

.mission-button:hover .mission {
    letter-spacing: 5px;    
}

.mission-button:hover::before {
    width: 32%;
    border-left-width: 200px;
    border-right-width: 200px;  
    height: 1px;
    top: 30px;
}

The issue arises when attempting to adjust the letter spacing of the span upon hovering over the div using the CSS:

.mission {
    letter-spacing: 0px;    
    -webkit-transition: all 1s ease;    
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    cursor: pointer;
    animation: changeColor 2s forwards;
}   

.mission-button:hover .mission {
    letter-spacing: 5px;    
}

However, the desired effect is not being achieved. It is speculated that another animation present for the mission button is taking precedence and causing the conflict.

htmlcss

Answer №1

One reason for this behavior is the animation-fill-mode being set to forwards, which retains the styles of the last keyframe, such as line-spacing:2px. A better approach might be to transfer the original line-spacing of 2px from the last keyframe to .mission:

@keyframes changeColor {
    0% {
        letter-spacing: 0px;
        color: white;
    }
    100% {
        color: black;
    }
}

.mission {
    letter-spacing: 2px;    
    -webkit-transition: all 1s ease;    
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    cursor: pointer;
    animation: changeColor 2s forwards;
}   

.mission-button:hover .mission{
    letter-spacing: 5px;    
}



.mission-button::before {
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 1s;
    border-left-width: 2px;
    border-right-width: 2px;
    border-left-style: solid;
    border-right-style: solid;
    background-color: transparent;
    border-color: black; 
    animation: borderOnLoad 2s forwards;
}

@keyframes changeColor {
    0% {
        letter-spacing: 0px;
        color: white;
    }
    100% {
        color: black;
    }
}

@keyframes borderOnLoad {
    0% {
        width: 100%;
        border-left-width: 3px;
        border-right-width: 3px;
        height: 100%;   
        top: 0;
        color: white;
        background-color: black;
    }
    50% {
        width: 200%;    
        left: -150px;
        border-left-width: 3px; 
        border-right-width: 3px;    
        height: 100%;   
        top: 0;
        color: white;
    } 
    100% {
        width: 65%;
        left: -150px;
        border-left-width: 200px;
        border-right-width: 200px;  
        height: 1px;
        top: 30px;
        color: black;    
        background-color: transparent;
    }
}

.mission-button {
    padding: 20px;
    /* background-color: #083958;*/
    cursor: pointer;
    width: 50%;
    position: relative;
    margin-top: 20px;   
    font-size: 20px;
    text-align: center;
}

.mission {
    letter-spacing: 2px;    
    -webkit-transition: all 1s ease;    
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    cursor: pointer;
    animation: changeColor 2s forwards;
}   

.mission-button:hover .mission{
    letter-spacing: 5px;    
}

.mission-button:hover::before {
    width: 32%;
    border-left-width: 200px;
    border-right-width: 200px;  
    height: 1px;
    top: 30px;
}   
  <div class="mission-button"><span class="mission">view our mission</span></div>

If you are unable to modify the original spacing, you can override it by using !important:

.mission-button:hover .mission{
    letter-spacing: 5px !important;    
}


.mission-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 1s;
  border-left-width: 2px;
  border-right-width: 2px;
  border-left-style: solid;
  border-right-style: solid;
  background-color: transparent;
  border-color: black;
  animation: borderOnLoad 2s forwards;
}

@keyframes changeColor {
  0% {
    letter-spacing: 0px;
    color: white;
  }
  100% {
    letter-spacing: 2px;
    color: black;
  }
}

@keyframes borderOnLoad {
  0% {
    width: 100%;
    border-left-width: 3px;
    border-right-width: 3px;
    height: 100%;
    top: 0;
    color: white;
    background-color: black;
  }
  50% {
    width: 200%;
    left: -150px;
    border-left-width: 3px;
    border-right-width: 3px;
    height: 100%;
    top: 0;
    color: white;
  }
  100% {
    width: 65%;
    left: -150px;
    border-left-width: 200px;
    border-right-width: 200px;
    height: 1px;
    top: 30px;
    color: black;
    background-color: transparent;
  }
}

.mission-button {
  padding: 20px;
  /* background-color: #083958;*/
  cursor: pointer;
  width: 50%;
  position: relative;
  margin-top: 20px;
  font-size: 20px;
  text-align: center;
}

.mission {
  letter-spacing: 0px;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  cursor: pointer;
  animation: changeColor 2s forwards;
}

.mission-button:hover .mission {
  letter-spacing: 5px !important;
}

.mission-button:hover::before {
  width: 32%;
  border-left-width: 200px;
  border-right-width: 200px;
  height: 1px;
  top: 30px;
}
<div class="mission-button"><span class="mission">view our mission</span></div>

Alternatively, you can wrap the text in another container and define the style there:

.mission-button:hover .text-spacing{
    letter-spacing: 5px;    
}

<div class="mission-button">
    <span class="mission">
        <div class="text-spacing">view our mission</div>
    </span>
</div>


.mission-button::before {
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 1s;
    border-left-width: 2px;
    border-right-width: 2px;
    border-left-style: solid;
    border-right-style: solid;
    background-color: transparent;
    border-color: black; 
    animation: borderOnLoad 2s forwards;
}

@keyframes changeColor {
    0% {
        letter-spacing: 0px;
        color: white;
    }
    100% {
        letter-spacing: 2px;
        color: black;
    }
}

@keyframes borderOnLoad {
    0% {
        width: 100%;
        border-left-width: 3px;
        border-right-width: 3px;
        height: 100%;   
        top: 0;
        color: white;
        background-color: black;
    }
    50% {
        width: 200%;    
        left: -150px;
        border-left-width: 3px; 
        border-right-width: 3px;    
        height: 100%;   
        top: 0;
        color: white;
    } 
    100% {
        width: 65%;
        left: -150px;
        border-left-width: 200px;
        border-right-width: 200px;  
        height: 1px;
        top: 30px;
        color: black;    
        background-color: transparent;
    }
}

.mission-button {
    padding: 20px;
    /* background-color: #083958;*/
    cursor: pointer;
    width: 50%;
    position: relative;
    margin-top: 20px;   
    font-size: 20px;
    text-align: center;
}

.mission {
    letter-spacing: 0px;    
    -webkit-transition: all 1s ease;    
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    cursor: pointer;
    animation: changeColor 2s forwards;
}   

.mission-button:hover .text-spacing{
    letter-spacing: 5px;    
}

.mission-button:hover::before {
    width: 32%;
    border-left-width: 200px;
    border-right-width: 200px;  
    height: 1px;
    top: 30px;
}
<div class="mission-button">
    <span class="mission">
        <div class="text-spacing">view our mission</div>
    </span>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using JavaScript, generate ten clickable circles on the screen. Each circle should display the number of times it has been clicked in the center when interacted with

I am currently working on my JavaScript skills and would like to implement a fun project involving 10 colorful circles. While I can easily create these circles using HTML and CSS, I require assistance with the interactive functionality using JavaScript. ...

javascripthtmlcss

Impact of designs on the elements within components

Here's a CSS query I have: If I have the code below, does the styling apply to the contents of v-container but not v-container itself? <v-app id="inspire"> <v-container justify-center style="max-width: 1200px"> <v-layout row ...

cssvue.jsvuetify.js

CSS has inexplicably ceased to function properly, with the exception of the body

My roommate submitted his project, but only the CSS for the body tag and Bootstrap elements are working properly. When inspecting the webpage, I noticed that none of the CSS changes were showing up, even after editing the Sublime file (except for the body ...

htmlcss

Implementing additional input with Jquery causes tooltips to malfunction

I am developing a form that allows users to add as many rows as needed. Each input is being treated as an array for easy data storage in the database, which is a new concept for me. $(document).ready(function() { var maxField = 10; //Limitati ...

javascriptjqueryhtmlcssmaterialize

Using JQuery and PHP to make an Ajax request and handle JSON response

I'm attempting to complete a straightforward exercise: The task involves entering two numbers in separate inputs, clicking a button, and seeing the result appear in a third input. sum.html: <html> <head> <title>Sum</tit ...

phpjqueryhtmlajaxjson

Is it possible to remove htmlescape from the custom options in Magento? Can you specify which file showcases the custom

Looking to incorporate HTML into custom option labels for products on my Magento store. Unfortunately, Magento does not parse HTML by default when it is placed in the custom options interface. I suspect there may be a line like "$this->htmlEscape()" wit ...

phphtmlmagentoe-commerce

Is there a way to display additional data alongside form submissions that do not directly correlate with the form fields?

I am working on incorporating event registration functionality using CodeIgniter. The goal is to showcase event details and allow users to register for an event. For registration, users will be required to log in before proceeding. Once logged in, their i ...

phphtmlcodeigniter

Dynamically created HTML elements have no events attached to them in Angular and jQuery

Utilizing jQuery, I am dynamically generating new elements within an Angular Form that has been constructed using a Template Driven Forms approach. Despite successfully creating the dynamic elements, they do not seem to be assigned events/callbacks due to ...

javascriptjqueryhtmlangular

Displaying list items with <output> compared to using <ul>

While it's commonly known that the <ul> tag is used to display <li> items, I recently discovered that the <output> tag can also be utilized for this purpose after reading about it here. In my current project, I have been using the & ...

html

What is the best way to adjust a component to display varying content based on the scenario?

I am looking for a way to reuse a component on my website that displays messages. The challenge is that in one section, the content consists of only a title and paragraph, while in another section, there are multiple titles and content pieces. I have imple ...

htmlcssvue.js

Styling tables with borders in CSS

If a table is set to have a border at a high level, how can I ensure that classes inheriting from it do not have any borders set? table,td,th { border: 1px solid #0B6121; } How can I make sure that my other table has no borders at all? table.menu { ...

css

Exploring Material UI: Step-by-step guide to customizing component styles

After reviewing the documentation, I have discovered two ways to style the component: import * as React from 'react'; import { makeStyles } from '@mui/styles'; import Button from '@mui/material/Button'; const useStyles = make ...

htmlcssreactjsmaterial-uimern

Optimize your website by reducing the size of CSS, JavaScript, and HTML files through NUXT's

I'm currently working on a project in NUXT utilizing yarn for managing packages. My objective is to compress (and potentially merge) js, css, and html files to enhance load time efficiency. I came across "https://www.npmjs.com/package/nuxt-compress" ...

javascriptcssvue.jsnuxt.jsyarnpkg

Navigate to the specified location using AJAX

When I update a comment using AJAX, I want to automatically scroll down to the updated comment: $("#aggiorna").click(function(){ var value = $("#id").val(); var dato = $("#comment_edit").val(); var dato1 = $("#user_id").val(); var dato2 = ...

javascriptjqueryhtmlajax

Creating a Select Directory feature with React - A Step-by-Step Guide

I am in need of uploading all files from a folder to the server. I have been attempting to use a Select Directory window instead of selecting individual files. The standard method: <input type="file" webkitdirectory directory/> has not worked for ...

htmlreactjsfolderbrowserdialog

javascript The unchecking of a checkbox is not functioning

I am facing an issue with this JavaScript code. The problem is that when I uncheck a value, it removes all the values from the result instead of removing just the specific unchecked value. Can someone please help me with this? <script> window.addE ...

javascriptjqueryhtmlcheckbox

How can I wrap content with the <li> element in a cross-browser compatible way?

I am encountering an issue with the dropdown menu on my website located at . When hovering over elements with a dropdown menu, you may notice that some of the items within the dropdown span more than one line and have varying widths. My goal is to adjust ...

csswidthhtml-lists

PHP data is not displayed by Ajax

I seem to be encountering a bit of trouble. I am attempting to utilize ajax to retrieve data from a PHP server, which in turn fetches it from a MySQL database, and then display it within a specific HTML tag location. However, for some unknown reason, nothi ...

javascriptphphtmlmysqlajax

Create a video player in your HTML code using the class "afterglow", and also link a separate class to it for additional styling

I'm encountering some challenges with a project that involves a JS file for a Bootstrap modal popup and an HTML5 video player. The issue I'm facing is that I am unable to link the class for the video player theme. Can anyone here assist me in ide ...

javascripthtmlvideo-player

Guide to aligning text to the right using the text-muted class

I'm attempting to align the text-muted class to the right side of the page. I've tried floating it right, pulling it right, but nothing seems to be working. <table class="table table-bordered"> <tbody> <tr> < ...

htmlcssbootstrap-4