Is there a way to include a link in this CSS button without interfering with the transition effects? Here's an example I found on Google: Visit http://www.w3schools.com/css/tryit.asp?filename=trycss_buttons_animate2
Is there a way to include a link in this CSS button without interfering with the transition effects? Here's an example I found on Google: Visit http://www.w3schools.com/css/tryit.asp?filename=trycss_buttons_animate2
Give this a shot with setTimeout():
$(function() {
$('a').click(function(e) {
e.preventDefault();
setTimeout(function() {
window.location = $(this).attr('href')
}, 200);
});
});.button {
position: relative;
background-color: #4CAF50;
border: none;
font-size: 28px;
color: #FFFFFF;
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.button:after {
content: "";
background: #90EE90;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px!important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}
.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://google.ro">
<button class="button">Click Me</button>
</a>To create a clickable button, enclose it within an <a> tag and specify an href attribute that points to the desired link.
Implement the onclick function within your button tag to execute a specific action. Here's an example:
<button class="button" onclick="location.href='http://google.com';">Click Me</button>
This method will not interfere with any transition effects applied to the button.
If you need to perform a task after a certain delay, consider using setTimeout() method.
onclick="setTimeout(function(){window.open('http://www.google.com')},500)
In the provided code snippet, simply replace '500' with your desired transition duration.
My website includes an input field that undergoes real-time checking via AJAX requests to inform users if their input is valid or not. Upon submission, the input must be rechecked to ensure it meets the same criteria as checked by AJAX (in case JavaScript ...
In my HTML code, I have a division that contains multiple image objects with the position set to absolute. Here is an example: <div> <img> <img> <img> <img> </div> The problem arises when the ...
Looking to create a unique background effect that resembles two progress bars as shown in this image: https://i.sstatic.net/LpENZ.png I know how to create one progress bar using linear gradients, but I'm wondering if there's a way to split the b ...
I'm facing an issue where the first set of data from the ng-repeat div is not loading before clicking on the ng-repeat. Below is the code snippet: <div class"profile" ng-repeat="data in information" ng-click="getData(data.i ...
Currently, I am looking to populate multiple dropdown lists using jQuery when the page loads rather than relying on ajax responses to events. My Controller is responsible for creating several List objects that will be used for these dropdowns. Right now, I ...
I am looking for assistance regarding the jQuery datepicker. I have an array of dates and I need to disable all dates except for the ones in this specific array. Currently, the code I have does the opposite of what I need. I generate the array of dates in ...
I recently integrated react-native-material-dropdown-v2 into my project using React Native. https://i.sstatic.net/aKVfi.png Is there a way to eliminate the bottom border in this material dropdown component? My React Native version is 0.62.2. ...
I have created a website control with jQuery that features a long bar consisting of four colored divs. Users have the ability to drag the join between two divs in order to resize it, all within the confines of the bar itself (keeping the overall width of t ...
I am facing an issue with the sub menu bar on this website. I am using the Constellation theme for WordPress and have attempted to adjust margins in order to make it visible, but so far I have been unsuccessful. The sub menu is meant to be responsive, yet ...
When I need to retrieve the background-color of a WebElement, I typically use the following code: string color = IWebElement.GetCssValue("background-color"); Selenium often returns something like this for the color value: color = "rgba(153, 255, 255, 1) ...
I'm looking to reduce the space between my child divs when they wrap It seems like the issue lies within the media query * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 10px; width: 100%; } html, bo ...
Once again, I find myself stuck on a problem. Allow me to explain. Within this div, I have retrieved data using HTML SIMPLE DOM from another site. Like so: <div id="data">.....</div> Currently, the data refreshes whenever the user reloads th ...
After following a tutorial that resulted in creating a web app to store form input data locally, I attempted to create a native app using phonegap and Xcode. However, I am struggling to figure out how to implement a swipe to delete feature for individual ...
Below is the form structure: <table id="participants" class="table table-bordered table-hover table-responsive text-center"> <form action="unique-controller.php" method="post" id="uniqueForm" enctype="multipart/form-data"> <input type="hidd ...
I'm attempting to utilize the html binding feature to link some html code to a label element, in order for the label to display the specified text. Despite using the html binding, the label remains blank. However, upon inspecting the page in the brow ...
A script containing dynamic HTML content is sourced from an external website, injected by RSS feeds. To access the content directly, visit this link. The script needs to be wrapped around HTML tags for front-end display. For example: <div>http://fe ...
I am looking to adjust the width of the black background to match the image and buttons for better proportions. Below is the code for one component on the page, with a similar structure for other components as well. <link rel="stylesheet" href="http ...
My goal is to have the buttons "btns" remain visible if one or more checkboxes are checked, and hide them only when all checkboxes are unchecked. Currently, the buttons show up when I check a checkbox, and disappear when I uncheck it. How can I modify my ...
Currently, I am working with WordPress and in need of a script to remove images from the gallery. The current script I have deletes images only from the page and not from the server. This means that if I save changes and reload the page, the images will st ...
I recently ventured into the world of Safari extension development. After creating an extension using Extension Builder, I packaged and uploaded it to a server. On my website, I provided a download link for the extension: <a href="http://example.com/ex ...