My website's button needs some extra flair, so I found this CSS example that I want to incorporate:
I attempted to add the CSS code in the WordPress customizer CSS input...
I modified the class to match my button...
.btn--primary
but unfortunately, it's not working as expected.
If anyone has any suggestions, I would greatly appreciate the help. Thank you in advance!
@-webkit-keyframes sheen {
0% {
-webkit-transform: skewY(-45deg) translateX(0);
transform: skewY(-45deg) translateX(0);
}
100% {
-webkit-transform: skewY(-45deg) translateX(12.5em);
transform: skewY(-45deg) translateX(12.5em);
}
}
@keyframes sheen {
0% {
-webkit-transform: skewY(-45deg) translateX(0);
transform: skewY(-45deg) translateX(0);
}
100% {
-webkit-transform: skewY(-45deg) translateX(12.5em);
transform: skewY(-45deg) translateX(12.5em);
}
}
.wrapper {
display: block;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.button {
padding: 0.75em 2em;
text-align: center;
text-decoration: none;
color: #2194E0;
border: 2px solid #2194E0;
font-size: 24px;
display: inline-block;
border-radius: 0.3em;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
position: relative;
overflow: hidden;
}
.button:before {
content: "";
background-color: rgba(255, 255, 255, 0.5);
height: 100%;
width: 3em;
display: block;
position: absolute;
top: 0;
left: -4.5em;
-webkit-transform: skewX(-45deg) translateX(0);
transform: skewX(-45deg) translateX(0);
-webkit-transition: none;
transition: none;
}
.button:hover {
background-color: #2194E0;
color: #fff;
border-bottom: 4px solid #1977b5;
}
.button:hover:before {
-webkit-transform: skewX(-45deg) translateX(13.5em);
transform: skewX(-45deg) translateX(13.5em);
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}<div class="wrapper">
<a href="#" class="button">Shiney!</a>
</div>I successfully implemented this code in my WordPress setup. You may want to consider using the !important tag if there are conflicting classes in your theme.
The validation issue in the email field is causing the is-valid effect to appear incorrectly. Although the email format is not valid (not 'gmail.com' format), a green outline and checkmark are displayed. How can I adjust this to work properly lik ...
I followed a tutorial to set up my project which can be found here: However, when I run the gulp file, the CSS/JS files are not being linked. I have applied a background color to the body but it is not showing up. I installed Bootstrap 4 using npm and ad ...
As I work on scripting some CSS, I have come across a small challenge where the right margin seems smaller than the left one despite both being set at 5%! This issue is occurring while using Firefox version 35.0.1. body { width: 100%; padding: 0; ...
As a complete novice in HTML/CSS, I am attempting to create my portfolio. My approach is to start with the most basic elements, beginning with the background. Since my main page is a large scrollable one, I want the background to fit the screen size of the ...
Here is the code I am using: <script type="text/javascript"> $(document).ready(function() { $('#submit').prop('disabled', true); $('#links').change(function() { $('#submit').prop('disabled ...
I am having trouble centering my menu on the website. While other elements like images are centered, the menu seems to be off-center. Below is a snippet of the CSS code related to the menu: @charset "UTF-8"; /* CSS Document */ #nav { width:975p ...
I am experiencing an issue on my blog. In Firefox, there is a noticeable gap at the top of the site that is not present in Chrome, and I can't seem to fix it. Even Firebug didn't provide any solutions. It's strange: when I adjust the margi ...
How can I align a div to the right using margin-right auto? I attempted margin-right: auto; and margin: 0 0 0 auto; but it was not successful. ...
I'm experiencing difficulties with the new Bootstrap 4. Can anyone provide guidance on how to incorporate multiple Bootstrap carousels into a single page? I've researched several websites, but most only offer solutions for Bootstrap 3. Your assi ...
Seeking assistance for an Angular application, but the query also pertains to CSS principles in general. In my Angular project, I have a main component containing several child components, all with standard view encapsulation. Specifically, I am looking t ...
Encountering a rendering problem in a Cordova iOS app with the CSS property -webkit-overflow-scrolling: touch. I have already included this property in the config.xml file. ...
When you first run the program and click anywhere on the body, it activates the collapse element. I want it to only collapse the accordion on click, not show it immediately. Currently, it will deactivate only after it is hidden once. HTML <!DOCTYPE ht ...
I have a table where the tr is styled with a border. I am looking to eliminate the border from the last td in the tr. Here is an example: <table> <thead> <tr> <th>a</th> <th>b</th> <th&g ...
I've been working on a website for my client that works perfectly fine in Chrome, Firefox, Microsoft Edge, and even Internet Explorer :P. However, I'm facing some issues with Safari. Here's a snippet of the code I used: <html> <hea ...
Within this flex element, I have set flex: column wrap; and max-height: 150px;. The issue I'm facing is that justify-content doesn't seem to be working. However, when I switch to using height: 150px, the alignment works fine. This problem arises ...
I am looking to maintain the aspect ratio of a DIV element, similar to how it's done on Google Maps. <div id="map" style="background-color: grey;width:100%;"> Map here </div> The current setup adjusts the width based on the window size o ...
I am dealing with a situation where I have a page containing a data grid, and each row in the grid contains a bootstrap dropdown button/menu with various actions that can be performed on that specific row of data. However, there is a problem - the menu ope ...
I have recently designed a basic webpage in an attempt to simulate ajax using CSS. In order to achieve this, I aimed to create hidden radio buttons with visible labels, and load an external CSS file when the user clicks on a label. However, I encountered o ...
Here is the HTML content I am working with: <li class="info"> info<li> <li class="other"> info<li> <li class="other"> info<li> <li class="Error"> error<li> <li class="other"> error<li> < ...
Is there a way to make the search bar shrink on mobile view while keeping everything in line? Currently, the button is wrapping underneath the search bar. Check out the solution on JSFiddle body { margin: 10px; } .navbar-container { display: fle ...