Load button in html

Onclick Button Loading Animation CSS

An animated button is an interactive way to quickly inform the users about the next process. It attracts the users as well as aware them about the next process is still loading. In this tutorial, you will come to know how to create an onclick button loading animation using HTML, CSS, and JS.

As you have seen in the above preview, there is a black button with a green spinner loader inside it. The spinner animates on the click event and after a certain time, the button comes back to its previous state. You can view the button animation in the following video:

Video Preview

The idea of button loading animation is very simple. We will create a button and spinner icon with CSS. We will keep the spinner in a separate class and add it to the button on the click event to display the loading animation. Similarly, we’ll change the button text and after a certain time period, we’ll remove the spinning class and set the previous button text.

The button and spinner color can be customized according to your needs. You can also check these CSS button styles to set the custom style for button animation.

The HTML Code

First of all, create the HTML button element with a class name «twoToneButton» , wrap it into a div element and define its class name «twoToneCenter» . Basically, the wrapper element is optional to align the button to the center.

Place the above HTML code where you want to display the button. You can also create a hyperlink or virtual button by adding the class name «twoToneButton» to the anchor tag. Similarly, you can add this class name to your existing buttons in which you want to integrate loading animation.

CSS Styles for Button Loading Animation

In CSS, select the container class and define the text-align property with «center» value to align the button to the center of the page (or parent element). Similarly, define the margin property with the “1em 0” value to leave some space for the top and bottom of the button’s container

After that, select the «twoToneButton» class and display it as an inline-block element. Use the CSS outline property with «none» value in order to remove the default button’s outline. Define the padding, line height, background, and color property with the mentioned values. Likewise, specify values for text-shadow, position, transition, and box-shadow as follows:

Now, target the button class with the hover pseudo-selector and define the box-shadow with inset values as follows:

In the same way, select the button class with an active pseudo selector and define the box-shadow, color, and background as follows:

After defining the basic styles for the button, now it’s time to style the spinner loader inside the button. So, target the “spinning” class and define the background color. This class will be added to the button element onclick event and a loading spinner will be displayed inside the button.

Likewise, target the :after and :before pseudo-selector and define the content property with a blank value. Specify the right and top properties with 6px and 50% values respectively. Keep the 0 value for both width and height properties, define the box shadow, and set the absolute position. Use the CSS border radius with 50% value in order to make the circular spinner. Define the animation-name «rotate360» and exist with infinite linear forwards ease values.

.twoToneButton.spinning:after < content: ''; right: 6px; top: 50%; width: 0; height: 0; box-shadow: 0px 0px 0 1px #080808; position: absolute; border-radius: 50%; -webkit-animation: rotate360 0.5s infinite linear, exist 0.1s forwards ease; animation: rotate360 0.5s infinite linear, exist 0.1s forwards ease; >.twoToneButton.spinning:before

Finally, define the animation keyframes for the «rotate360» and «exist» animation as follows:

@-webkit-keyframes rotate360 < 100% < transform: rotate(360deg); >> @keyframes rotate360 < 100% < transform: rotate(360deg); >> @-webkit-keyframes exist < 100% < width: 15px; height: 15px; margin: -8px 5px 0 0; >> @keyframes exist < 100% < width: 15px; height: 15px; margin: -8px 5px 0 0; >>

Button Loading Animation JS Function

After creating the HTML and CSS for the animated button, now it’s time to apply the spinner loading animation on the click event. To do so, we’ll use JavaScript click event and change the button inner HTML and a class name “spinning” to display a loader inside the button. On the other hand, we’ll use the JavaScript setTimeout function to remove the spinning class and inner HTML to take the button to its previous state. So, the following is the complete JS function to animate the button.

That’s all! I hope, you have successfully created a CSS onclick button loading animation. If you have any suggestions or questions, feel free to comment below. Happy coding 🙂

Источник

How to create a custom file upload button

I find the default HTML file upload button rather ugly. Annoying enough, there seems to be no way to style it directly. Here is how I created a custom file upload button.

1. Use a label tag and point its for attribute to the id of the default HTML file upload button

  type="file" id="actual-btn"/>  for="actual-btn">Choose File 

By doing this, clicking the label element in the browser toggles the default HTML file upload button (as though we clicked it directly). The output of the above code is below. As you can see, we only have a Choose File text (from the label element) a few pixels to the right of the actual upload button. We can click the Choose File text, and it will toggle the upload window (Click it and see)

2. Style the label element and hide the default HTML file upload button

We hide the default HTML file upload button in the browser by adding the hidden attribute to the tag like so

 type="file" id="actual-btn" hidden/> 

label  background-color: indigo; color: white; padding: 0.5rem; font-family: sans-serif; border-radius: 0.3rem; cursor: pointer; margin-top: 1rem; > 

Now we have this beautiful custom button, which actually works like the original file upload button: At this point, we are done. But there is one more glitch to fix. With the default file upload button, there is a no file chosen text beside the button (scroll up to the first codepen window), which gets replaced with the name of the file we will be uploading. Unfortunately, we don’t get to see that with our custom button. How do we do that? What I did was to include a span tag (with an id of file-chosen) right after our custom file upload button. In the javascript file, I listen to the change event on the original file upload button(which we have hidden). A file object is returned which contains the details(such as name, file size etc) of the file uploaded. Then I set the text content of the span element(with the id of file-chosen) to the name property of the file object returned. The final result is below. Test it out. Kindly leave your comments and questions down below

Источник

Create a Button with a Loading Spinner in HTML & CSS 🔥

In today’s post I’ll be showing you how to use HTML and CSS to create an awesome looking button that features a loading spinner when clicked on.

Source Code & Preview

Video Tutorial

If you prefer this tutorial in the form of a video, you can watch it on my YouTube channel, dcode. Also, consider subscribing to my channel if you’re interested in web development 😁

HTML

Let’s begin by writing the HTML for the button. This is going to be fairly straightforward. We create a with a class of button and use a for the text inside of it.

 type="button" class="button">  class="button__text">Save Changes  

CSS

Styling The Button

.button  position: relative; padding: 8px 16px; background: #009579; border: none; outline: none; border-radius: 2px; cursor: pointer; > .button:active  background: #007a63; > .button__text  font: bold 20px 'Quicksand', san-serif; color: #ffffff; transition: all 0.2s; > 

As you may have noticed, a lot of these properties are for look and feel — but the main one to focus on here is position: relative . By using position: relative , it means we can center the loading spinner, which we’ll see shortly.

Creating The Spinner

We’ll be using the ::after pseudo-element to create the spinning animation. A pseudo-element is an element (like HTML) that you can style in CSS — in our case, ::after will create a «fake element» that sits inside our .button .

Important!
We’re going to be applying CSS to a class called .button—loading . Basically, this is a modifier class on the .button which can be added dynamically through JavaScript whenever you want the spinning animation to appear. For example, this may be done at the time of submitting a form.

.button--loading::after  content: ""; position: absolute; width: 16px; height: 16px; top: 0; left: 0; right: 0; bottom: 0; margin: auto; border: 4px solid transparent; border-top-color: #ffffff; border-radius: 50%; animation: button-loading-spinner 1s ease infinite; > 

• content: «»; — this is a requirement to get the spinner to display
• position: absolute; — used in combination with position: relative; above, and the top , left , right and bottom properties will allow us to center the spinner
• border: 4px solid transparent — with this, we are setting a 4px wide solid border that is transparent. Combining it with border-top-color will only show a border at the top of the 16×16 square. This is key to creating a circle spinner.
• border-radius: 50% — this creates the circle

I recommend you toggle some of these properties on and off, to get a full understanding of how they work to produce a circle.

As you may have noticed, we’re also specifying an animation here, with a value of button-loading-spinner 1s ease infinite . This means, as long as the spinner is showing, make it spin infinitely with an ease timing duration, and an animation time of 1 second.

The button-loading-spinner animation doesn’t actually exist yet, so we must create it.

Animation

To make the animation specified in the previous block of code above work, we need to create keyframes for it. This is simple.

@keyframes button-loading-spinner  from  transform: rotate(0turn); > to  transform: rotate(1turn); > > 

Here, we’re just saying the animation must turn our quarter-circle spinner from no turn to a full turn. With this code, the animation property above will now work.

Making The Button Work

Now that we’ve got all the CSS done, we need to make the spinner appear using JavaScript. Typically, you’ll want to activate the spinner as soon as the button is clicked on.

To do this, you simply add the class of .button—loading , for example:

const theButton = document.querySelector(".button"); theButton.addEventListener("click", () =>  theButton.classList.add("button--loading"); >); 

Every application is going to be different, so it’s up to you to decide when to toggle the loading spinner. To remove it, you can use classList.remove(«button—loading»); .

Conclusion

And that is how to create a button with a loading spinner using HTML and CSS. If you have any questions or comments please leave them below and I’ll try my best to respond 🙂 cheers!

Источник

HTML Tag

Inside a element you can put text (and tags like , , ,
, , etc.). That is not possible with a button created with the element!

Tip: Always specify the type attribute for a element, to tell browsers what type of button it is.

Tip: You can easily style buttons with CSS! Look at the examples below or visit our CSS Buttons tutorial.

Browser Support

Attributes

Attribute	Value	Description
autofocus	autofocus	Specifies that a button should automatically get focus when the page loads
disabled	disabled	Specifies that a button should be disabled
form	form_id	Specifies which form the button belongs to
formaction	URL	Specifies where to send the form-data when a form is submitted. Only for type=»submit»
formenctype	application/x-www-form-urlencoded multipart/form-data text/plain	Specifies how form-data should be encoded before sending it to a server. Only for type=»submit»
formmethod	get post	Specifies how to send the form-data (which HTTP method to use). Only for type=»submit»
formnovalidate	formnovalidate	Specifies that the form-data should not be validated on submission. Only for type=»submit»
formtarget	_blank _self _parent _top framename	Specifies where to display the response after submitting the form. Only for type=»submit»
name	name	Specifies a name for the button
type	button reset submit	Specifies the type of button
value	text	Specifies an initial value for the button

Global Attributes

Event Attributes

More Examples

Example

.button border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
>

Example

Use CSS to style buttons (with hover effect):

.button border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
>

.button1 background-color: white;
color: black;
border: 2px solid #4CAF50;
>

.button1:hover background-color: #4CAF50;
color: white;
>

.button2 background-color: white;
color: black;
border: 2px solid #008CBA;
>

.button2:hover background-color: #008CBA;
color: white;
>

Related Pages

Источник