While browsing ThemeForest, I stumbled upon this theme:
What caught my eye were the animation effects on the two buttons in the slider ("buy intense now" and "start a journey"). I tried to inspect the code using Firebug but couldn't figure it out completely. After searching on Google, I found Hover.css, which wasn't quite what I was looking for. Can anyone explain how to achieve this effect?
Appreciate any help in advance!
If you want a specific effect, take a look at the code snippet provided below.
Here is the HTML:
<section id="button-container" class="section">
<div id="effect" class="button">
<span class="text">Button</span>
</div>
</section>
And the CSS:
body, html {
height: 100%;
width: 100%;
}
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.section {
float: left;
font-family: 'Helvetica', sans-serif;
height: 50%;
width: 50%;
display: flex;
-webkit-display: flex;
-webkit-align-items: center;
align-items: center;
justify-content: center;
-webkit-justify-content: center;
}
.button {
border: none;
cursor: pointer;
padding: 25px 50px;
border: solid 1px gray;
border-radius: 8px;
position: relative;
}
.button .text {
position: relative;
z-index: 100;
font-size: 2em;
}
#button-container {
background-color: #fff;
}
#button-container #effect {
background-color: #42b574;
overflow: hidden;
}
#button-container #effect .text {
color: #fff;
transition: all .5s linear;
-webkit-transition: all .5s linear;
}
#button-container #effect::after {
content: '';
position: absolute;
transition: top .5s ease-in .5s, width .5s ease-out, height .5s ease-out;
-webkit-transition: top .5s ease-in .5s, width .5s ease-out, height .5s ease-out;
left: 50%;
top: -50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #79ccf2;
}
#button-container #effect:hover .text {
color: #ffffff;
transition: color .5s linear .5s;
-webkit-transition: color .5s linear .5s;
}
#button-container #effect:hover::after {
transition: top .5s ease-in, width .5s ease-out .5s, height .5s ease-out .5s;
-webkit-transition: top .5s ease-in, width .5s ease-out .5s, height .5s ease-out .5s;
top: 50%;
width: 400px;
height: 400px;
}
To see the effect in action, check out the demo here
Upon examining the CSS, it is clear that the implementation involves a detailed use of CSS properties. To gain a better understanding of the techniques employed, it is recommended to inspect both the HTML and CSS code.
After a thorough analysis, a few key observations were made:
By systematically replicating each step and accurately executing the CSS transformations and animations, it is possible to recreate this intricate animation successfully.
While attempting to replicate some of the CSS properties, limited success was achieved. However, further exploration and experimentation may yield better results. For reference, a fiddle is provided to aid in the process.
Is there a way to dynamically add elements to the end of the body using vanilla JavaScript? const newRecipe = <div id = "container"> <div className="recipe App" id="four" onClick={this.toggleRecipeList.bind(this)}>{this.state.recipeName} < ...
Provided a set of elements (number unknown) where some elements should remain hidden: <div id="root"> <div> 1</div> <div class="hide"> 2</div> <div class="hide"> 3</div> <div class="hide"&g ...
I'm currently facing a challenge in incorporating logic into a dustjs template, and I find it challenging to integrate all the components seamlessly. Here is an example of the JSON data I have: { "names": [{ "name": "User 1", "is ...
I'm currently faced with a unique challenge involving the creation of around 200 canvases, each showcasing an image captured from the user's webcam as part of an experimentation process for the "photo finish" technique. My task now is to export ...
Hello, I encountered an error in my console that reads: "Uncaught SyntaxError: The requested module './components/tileHeader/controller.js' does not provide an export named 'tileHeader'". Below is the code snippet causing the issue: co ...
I've been working on writing some code to retrieve and read a JSON file. It seems to work fine in Chrome, but I'm running into issues with IE11, which is the browser I need to use. I've tried changing variable names, but the problem persists ...
Looking to replicate this design, any tips? I'm aiming for a carousel layout with developers listed in a project, where the center item is larger than the others. Any guidance on how to achieve this look? ...
My objective is for the video to automatically start playing when it enters the viewport, even if the play button is not clicked. It should also pause automatically when it leaves the viewport, without the need to click the pause button. <script src=& ...
I've been experimenting with the QTreeView widget (instead of QListView) in order to have a horizontal header. Additionally, I wanted to use stylesheets to customize the colors and appearance of the header and scrollbars. However, there is an issue w ...
In my current project, I am attempting to make the grandchild of a rotated Object3D element face towards the camera using the lookAt() method. I have experimented with various approaches to achieve this. However, the source code for the Object3D.lookAt() ...
I have a JavaScript array that looks like this: var fruits=['apple','orange','peach','strawberry','mango'] I would like to add an event to these elements that will retrieve varieties from my database. Fo ...
I've encountered the following code snippet: HTML: <div [class]="new_workflow_row_class" id="new_workflow_row"> <div class="col-sm-6"> <label class="checkmark-container" i18n>New Workflow <input type="che ...
I have a scenario in my controller.js where I need to make an HTTP GET request when the page loads and when the user pulls to refresh. Currently, I find myself duplicating the $http code. Is there a way to refactor this for reusability? I'm struggling ...
Trying to figure out how to make a specific cell in a table disappear when viewing an HTML page on mobile devices, while having a width of 20% for desktop. However, the issue is that even though the table cell is invisible on mobile, it still occupies sp ...
I am encountering an issue where I am trying to save an AJAX response to the Post PHP variable and display it on the same page. However, I keep getting a "Notice: Undefined index" error. I believe the problem lies in the success part of the AJAX call. Can ...
I found myself with some free time and decided to create a basic API using JavaScript. What I thought would be simple turned into a frustrating mistake. Oddly enough, my if/else statement isn't working correctly - it only executes the code within the ...
I'm currently developing a client-side application with Webpack and facing challenges when trying to incorporate the materialize-css package. Using Henrik Joreteg's hjs-webpack package, I was able to include the yeticss npm package by importing i ...
Currently, I am working on a real-time game using three.js and websockets. The project has been running smoothly until recently when I encountered a hurdle. While implementing animations, I noticed that the animations for the opposing client on the web pag ...
I'm attempting to center the image. It seems like it should be a simple fix, but I've experimented with multiple solutions and even started from scratch three times. #main_image { background-color: bisque; position: fixed; display: block; ...
I'm currently in the process of developing an app that makes use of electron, react, redux, and several other technologies. At the moment, I have included electron, react, electron-compile, and babel in the project. Redux is installed but has not been ...