Highlight the content within my CSS class

I've been working on a cool animation for a button on my website. When a user hovers over it, the button skews from right to left. The problem is that the text inside the button also skews with it, which is not the effect I want to achieve. I attempted using JavaScript to fix this issue but haven't had any success so far. Here's the code snippet I have:

.btnredskewed
{
    font-family: 'cabinbold';
border: #f94f4f solid 3px; 
border-radius: 6px;
background-color: #f94f4f; 
color: #ffffff;
font-size: 15px;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 10px;
padding-right: 10px;
cursor: pointer;
text-transform: uppercase;
  transition: 0.2s;

-ms-transform: skewX(-20deg); /* IE 9 */
    -webkit-transform: skewX(-20deg); /* Safari */
    transform: skewX(-20deg);
}

.btnredskewed:hover
{
    font-family: 'cabinbold';
border: #9cbce4 solid 3px; 
border-radius: 6px;
background-color: #9cbce4; 
color: #ffffff;
font-size: 15px;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 10px;
padding-right: 10px;
cursor: pointer;
text-transform: uppercase;

-ms-transform: skewX(20deg); /* IE 9 */
    -webkit-transform: skewX(20deg); /* Safari */
    transform: skewX(20deg);
}

.unskewtext
{
-ms-transform: skewX(20deg); /* IE 9 */
-webkit-transform: skewX(20deg); /* Safari */
transform: skewX(20deg);
}

.unskewtext:hover
{
-ms-transform: skewX(-20deg); /* IE 9 */
-webkit-transform: skewX(-20deg); /* Safari */
transform: skewX(-20deg);
}
<a href="#mogelijkheden"><button type="button" class="btnredskewed margintopsmall"><div class="unskewtext">explore the options</div></button></a>

cssbuttontexthoverskew

Answer №1

Revamp your CSS in this manner (ensure to skew in the opposite direction at the same rate, giving the illusion of no movement) :

.btnredskewed {
  font-family: 'cabinbold';
  border: #f94f4f solid 3px;
  border-radius: 6px;
  background-color: #f94f4f;
  color: #ffffff;
  font-size: 15px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 10px;
  padding-right: 10px;
  cursor: pointer;
  text-transform: uppercase;
  transition: 0.2s;
  -ms-transform: skewX(-20deg);
  /* IE 9 */
  -webkit-transform: skewX(-20deg);
  /* Safari */
  transform: skewX(-20deg);
}

.btnredskewed:hover {
  font-family: 'cabinbold';
  border: #9cbce4 solid 3px;
  border-radius: 6px;
  background-color: #9cbce4;
  color: #ffffff;
  font-size: 15px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 10px;
  padding-right: 10px;
  cursor: pointer;
  text-transform: uppercase;
  -ms-transform: skewX(20deg);
  /* IE 9 */
  -webkit-transform: skewX(20deg);
  /* Safari */
  transform: skewX(20deg);
}

.unskewtext {
  -ms-transform: skewX(20deg);
  /* IE 9 */
  -webkit-transform: skewX(20deg);
  /* Safari */
  transform: skewX(20deg);
  transition: 0.2s;
}

.btnredskewed:hover .unskewtext {
  -ms-transform: skewX(-20deg);
  /* IE 9 */
  -webkit-transform: skewX(-20deg);
  /* Safari */
  transform: skewX(-20deg);
}
<a href="#mogelijkheden"><button type="button" class="btnredskewed margintopsmall"><div class="unskewtext">explore the possibilities</div></button></a>

Answer №2

Feel free to test this out by following these steps. I have implemented a CSS code snippet for text transformation effects on hover as well as transition effects in the normal text class ".unskewtext".

.btnredskewed:hover .unskewtext {
   -ms-transform: skewX(-20deg); 
   -webkit-transform: skewX(-20deg); 
    transform: skewX(-20deg);
 }
.unskewtext
{ 
 -webkit-transition: 0.2s;  
 transition: 0.2s;  
}


.btnredskewed
{
  font-family: 'cabinbold';
  border: #f94f4f solid 3px; 
  border-radius: 6px;
  background-color: #f94f4f; 
  color: #ffffff;
  font-size: 15px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 10px;
  padding-right: 10px;
  cursor: pointer;
  text-transform: uppercase;
  transition: 0.2s;
  -ms-transform: skewX(-20deg); /* IE 9 */
  -webkit-transform: skewX(-20deg); /* Safari */
  transform: skewX(-20deg);
}

.btnredskewed:hover
{
  font-family: 'cabinbold';
  border: #9cbce4 solid 3px; 
  border-radius: 6px;
  background-color: #9cbce4; 
  color: #ffffff;
  font-size: 15px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 10px;
  padding-right: 10px;
  cursor: pointer;
  text-transform: uppercase;
  -ms-transform: skewX(20deg); /* IE 9 */
  -webkit-transform: skewX(20deg); /* Safari */
  transform: skewX(20deg);
}

.unskewtext
{
  -ms-transform: skewX(20deg); /* IE 9 */
  -webkit-transform: skewX(20deg); /* Safari */
  transform: skewX(20deg);
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.unskewtext:hover
{
  -ms-transform: skewX(-20deg); /* IE 9 */
  -webkit-transform: skewX(-20deg); /* Safari */
  transform: skewX(-20deg);
}
.btnredskewed:hover .unskewtext {
  -ms-transform: skewX(-20deg); 
  -webkit-transform: skewX(-20deg); 
  transform: skewX(-20deg);
}
<a href="#mogelijkheden"><button type="button" class="btnredskewed margintopsmall"><div class="unskewtext">bekijk de mogelijkheden</div></button></a>

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

CSS3 Internet Explorer 10 Page Fade-In Transition Effect

Seeking a sleek, elegant lightweight CSS3 page fade-in transition effect. Requirement only for IE 10 compatibility, as I plan to implement it in a Windows Metro App using the WebView control (a lightweight browser control based on IE 10). Transition shou ...

csscss-transitionscss-animations

What is the best way to implement a scrolling effect for a specific div tag using CSS?

I am facing an issue with scrolling a specific div tag, it seems to not be working as expected. <body style="margin:0; padding:0;"> <div id="head" style="width:100%; height:18%; background:#2a2a2a; position:fixed; overflow-y:hidden; "> <div ...

htmlcss

Relocate the Bootstrap selector box form to align with the left side of the page

I have included the Bootstrap CDN in my project, and I am encountering an issue with a form that contains a dropdown box. The problem is that the legend tag is properly aligned to the left of the page, but the selector box is slightly indented towards th ...

cssbootstrap-4

Creating a gallery row that wraps onto a new line using flex properties

I've been attempting to create a gallery-like layout using flexbox, where the divs are displayed in rows of three columns each. However, I'm facing an issue where all the divs align in one row without dropping to the next line when there are more ...

htmlcssflexbox

Struggling to implement a vertical scroll bar in HTML code?

<body ng-app="myApp" ng-controller="myCtrl"> <div ng-show = "dataFromRest" ng-repeat = "x in dataFromRest.posts" > <div class="tittle" style="width: 25%;"> <a href="" ng-click="showDi ...

javascripthtmlcssangularjs

What is the method to have a video automatically play as soon as the webpage is loaded?

Is there a way to have a video play automatically as soon as the page loads? Also, can you provide guidance on setting up multiple videos that can be switched using elements like buttons? Here's the source code: `https://codepen.io/yasgo/pen/BjbK ...

javascriptjavahtmlcssreactjs

Achieve perfect alignment of columns using CSS to ensure they fill the entire panel

I want to arrange a specific number of columns on a panel, each with a different width so that they fill the entire panel and create a full row of panels. Currently, the columns have varying widths but only occupy 70% of the panel's width. I am not ...

htmlcsswicket

What steps do I take to include alternative text for images I insert within the content?

Ensuring all my images have alt text is important, but I overlooked this when I added my background images to the CSS under the body tag. The following code shows the background image in my CSS that needs alt text: body { background: url('contact ...

javascripthtmlcssaccessibilitybootstrap-5

Unable to access the suggestion list within the modal

I incorporate the PrimeNG AutoComplete feature within a PrimeNG Dialog, displaying a list of elements below the AutoComplete in the dialog. My objectives are: To set the max-height of the modal dialog to 300, and have a visible scrollbar if the total ...

javascripthtmlcssangularprimeng

Flexbox properties are being ignored by input fields

Hey there, I'm currently working on a product calculator and need to create 9 input fields organized in 3 rows of three columns. However, when I try to use display: flex and flex-direction: row on the parent div, it doesn't seem to be working as ...

htmlcss

Tips for styling cells in a certain column of an ng-repeat table

I am currently facing an issue with a table I have created where the last column is overflowing off the page. Despite being just one line of text, it extends beyond the right edge of the page without being visible or scrollable. The table is built using th ...

javascripthtmlcssangularjssemantic-ui

Using JavaScript, implement CSS styling to the currently active item that has been dropped within a designated drop

When dragging and dropping nodes, I want to ensure that only the dropped node is highlighted with a border. For example, if I drop nodeA, it should be highlighted. Then, when I drop nodeB, nodeB should be highlighted while nodeA is not. Below is the funct ...

javascriptjqueryhtmlcss

The responsiveness of my flexbox containers is compromised when using flex-direction:column

I recently started learning flexbox and I'm having trouble understanding it. My header is somewhat responsive, and when I resize my browser window, it adjusts very well. However, the container below with flex-direction: column behaves strangely (try ...

htmlcssflexbox

Disappearing text with HTML Bookmark and CSS Overflow:Hidden - What's happening?

Within the header of my webpage, there is an image div that has been styled with overflow:hidden. Inside the content section, I have a bookmark anchor tag: <a name="arghargh"></a> Located at the top of the content area, there is a link that ...

htmlcssbookmarks

Text selection is disabled

During my work on the test website, I encountered an issue. I've included all of my code as I'm unsure where the problem lies. View the jsfiddle here. As shown in the jsfiddle, the top section of text on the website is unselectable. I'm seek ...

htmlcss

Utilizing a "secret" class instead of display: none for managing Tabs in Jquery

After researching screen readers and accessibility, I am interested in incorporating tab navigation into a website I am currently working on. However, I have concerns about data indexing, SEO, and accessibility issues. I am currently using a "hidden" class ...

htmlcsstabsseoaccessibility

Setting a Minimum Height in Bootstrap for a Div

I am currently working on designing a page with a banner using bootstrap. The image, which has the id "mybanner," is generated dynamically from the code. This means that there are occasions where the image element may not exist within my code. To ensure co ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Which font file format is the most suitable for my website?

I've been doing some research on fonts for my website, and I've come across various formats available. Now I'm curious about what the standard format is or if there are multiple standard formats. .TTF (True Type Font) .EOT (Embedded OpenTyp ...

cssfonts

Attempting to include a navigation bar within the footer section of my layout page - the master page on my website

Is there a way to add a navigation bar in my footer on the layout page without having to add it to every individual page? I want the icon color for the active page to be red, but only apply this to the current page and not all pages. Currently, when I nav ...

javascripthtmlcssbootstrap-4uinavigationbar

Bootstrap 4 - Content positioned on the left side of the screen next to an image ... on mobile devices, the text appears below

How can I ensure in Bootstrap 4 (and possibly other versions) that the text appears to the left of the image on the screen, and that the image is displayed above the text on smartphones? Here is my source code: <div class="container"> <div cla ...

htmlcsswebbootstrap-4media-queries