What is the best way to create an input field along with a span element using the :before pseudo class?

My first question on StackOverflow is regarding adding a pseudo-class before an input type button for animation (http://codepen.io/anon/pen/emodKG). I understand that it's not possible to directly add something before an input, so I attempted to include a span element with my input and assigned it the "btn" class from CodePen ...

The issue arises when the span overlaps the input, resulting in a clickable animation but making the input itself unclickable.

<span class="btn"><input type="button"></span>
htmlcssresponsive-design

Answer №1

Here is a suggestion that could be helpful for you :)

.btn {
  position: relative;
  display: block;
  margin: 30px auto;
  padding: 20px;
  overflow: hidden;
  border-width: 0;
  outline: none;
  border-radius: 2px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
  background-color: #2ecc71;
  color: #ecf0f1;
  transition: background-color .8s;
  text-align: center;
}
.btn:hover,
.btn:focus {
  background-color: #27ae60;
}
.btn:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 0;
  padding-top: 0;
  border-radius: 100%;
  background-color: rgba(236, 240, 241, .2);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.btn:active:before {
  width: 100%;
  padding-top: 100%;
  transition: width .1s ease-out, padding-top .1s ease-out;
}
.btn input {
  display: none;
}
<label class="btn"><input type="button" />Button</label>

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

The synchronization issue between ng-class and animation

I'm experiencing a strange issue with ng-class and suspect that it may be related to a race condition. Here is the example on Plunker: example Below is the relevant JavaScript code: self.slideLeft = function() { if (self.end_index < se ...

javascripthtmlcssangularjs

Switching from ejs format to html

I've been working on a tutorial that uses ejs, but I'm not too familiar with it. I'd like to know how to convert the server.js from using ejs to html. Here's the code snippet: app.set('view-engine', 'ejs') app.use( ...

javascripthtmlnode.jsexpresspassport.js

Transforming the hue of a Bootstrap button

I'm feeling a bit frustrated because I expected my code to work and shouldn't have to ask this question. Currently, I am working with bootstrap and trying to customize the default blue color of the btn btn-primary class to something different. ...

htmlcsstwitter-bootstrapbootstrap-4

How numerous data attributes are available within Bootstrap? What functions do they perform and what possible values can be assigned to them?

Lately, I've been exploring the world of data attributes in Bootstrap such as data-toggle, data-trigger, and data-ride. However, my search for a comprehensive list of these attributes has come up short. I'm curious about the potential values tha ...

htmltwitter-bootstrap

template not being loaded with form

My Django form is not showing up when I try to implement it. Even after checking the browser's inspector, there is no sign of it being loaded at all. If more information is required, please let me know. Here is the project structure: /beerad url ...

pythonhtmldjango

Modify the background color of four results with the help of PHP

With php, I am looking to dynamically change the background color of a td based on the number within it. While this can be achieved using CSS by assigning different classes to each td with specific colors, I prefer a more straightforward method for mainten ...

phpcssbackground-color

increase the number of rows in the table automatically

I've encountered an issue while working on a form that involves getting a value from a jQuery spinner and dynamically adding that number of rows to a table inside the form. Despite using firebug to debug, I couldn't pinpoint the exact cause of th ...

jqueryhtml

Dynamic and static webpage

Is it possible to design a webpage using purely valid HTML and CSS that can dynamically adjust its size based on the browser window, while ensuring none of the content is lost or cut off? Please refer to the linked image for a visual representation of what ...

htmlcssfixedfluid

Executing Python code through a website using PHP - is there a way to deactivate the button once it has been clicked?

Can you assist with the following issue? <?php if(isset($_POST['MEASURE'])) { shell_exec("sudo python /var/www/html/lab/mkdir.py"); } ?> Here is the HTML part: <form method="post" > <input type="submi ...

phppythonhtmlbutton

The horizontal scrolling with overflow-x is not functioning correctly as it is displaying the scrollbar for the vertical

I am perplexed as to why I am unable to scroll horizontally to view the other pink thumbs. Despite adding an overflow of scroll-x to the thumbs container, which should theoretically allow horizontal scrolling, it only seems to scroll vertically. Could som ...

htmlcss

Why is it that my threshold for frustration in Bootstrap has been reached due to the ineffective grid system

It’s puzzling to me why my breakpoint is fixed at 800 px when I’ve specified it to be 991 (lg and lower) in Bootstrap 4. Here's the code snippet that I’m using: <div class="container-fluid"> <div class="row"> <div c ...

htmlbootstrap-4grid

Display the bash script results on an HTML webpage

My bash script fetches device status and packet loss information, slightly adjusted for privacy: #!/bin/bash TSTAMP=$(date +'%Y-%m-%d %H:%M') device1=`ping -c 1 100.1.0.2 | grep packet | awk '{ print $6 " " $7 " " $8 }'` device2=`pin ...

javascripthtmlbash

"Utilize jQuery to superimpose an image on top of

I'm attempting to create a feature where clicking on an image will reveal text underneath, similar to how retailmenot.com displays coupon codes. In addition, when the image is clicked, users should be directed to an external URL. Here is an example o ...

javascriptjqueryhtml

The Google Closure Compiler Service is providing faulty code

I've been using Closure Compiler through to minify and obfuscate my JavaScript code, but I seem to be encountering an issue. To troubleshoot, I created a test page with a script. Here's the HTML5 code snippet: <!DOCTYPE html> <html> ...

javascriptjqueryhtmlgoogle-closure-compilervelocity.js

What type of programming language is utilized in creating this online interactive calculator?

I have a strong interest in creating an interactive calculator like the one found on keto-calculator, but I am unsure of where to begin my research on how to develop it. Can you provide insights on the coding language typically used for such calcula ...

html

I am facing an issue where the weather information is not being displayed even after sending a request to

I'm working on building an app that will provide users with weather data once they input a city. Utilizing the openweathermap.org API for this purpose, I've noticed in my console under networks that an API call is made when the city is entered, b ...

htmlcssreactjs

css - aligning text below another text in the center

Looking to style a text in a specific color with a message about another text below it? Want the text centered but not sure how to position it correctly? margin: 0px auto; If this code isn't delivering the desired result and is positioning your text ...

csscenter

Newbie Inquiry Renewed: What is the best way to convert this into a functional hyperlink that maintains the data received from the ID tag?

I have no prior training etc. If you are not willing to help, please refrain from responding as I am simply trying to learn here. <a id="player-web-Link">View in Depth Stats</a> This code snippet loads the following image: https://i.stack.i ...

javascriptjqueryhtmljson

The functionality of Vue.js Stylus and scoped CSS appears to be malfunctioning

I am currently utilizing stylus and scoped CSS styles with Vuetify. Despite trying to use deep nested selectors such as ::v-deep or >>&, I have not been successful in getting them to work (even after rebuilding the project due to issues with hot relo ...

cssvue.jsvuetify.js

Displaying XML data in an HTML table

Encountered a challenge while fetching data from an external XML document using JS. Following the w3schools tutorial for AJAX XML, but faced an issue I couldn't resolve. The XML structure is as follows: <root> <document-id> <author ...

javascripthtmljqueryajaxxml