Place a check mark in the corner of the button

I am looking to add a checkmark on my button in the right corner. I have set the input value and it displays a button with a check mark, but I want it to be positioned in the right corner.

.buttoner{
           background-color: #4CAF50;
              border: none;
              cursor: pointer;
              height: 48px;
              border-radius: 5px;
              width: 10%;
        }
     <input type="button" class="buttoner" value="buttoner&#10003"/></input>

I would like it to look like this:

https://i.sstatic.net/6Nuav.jpg

javascripthtmlcss

Answer №1

https://i.sstatic.net/VFvyk.png

.custom-button {
position: relative;
display: inline-block;
}
.button-style {
background-color: #66bb6a;
border: none;
cursor: pointer;
height: 48px;
border-radius: 3px;
width: 120px;
text-align: center;
color: white;
line-height: 48px;
font-size: 14px;
font-weight: bold;
}
.custom-button .fa-checkmark {
position: absolute;
top: 5px;
right: 10px;
color: #fff;
font-weight: normal;
}
<!DOCTYPE html>
<html>
<head>
<title>Button with checkmark</title>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="custom-button">
<input type="button" class="button-style" value="Click Me"/>
<i class="fa fa-checkmark"></i> </div>
</body>
</html>

Answer №2

Give this a try

CSS and HTML Examples

<!DOCTYPE html>
<html>
<head>
    <title>Button with Check Mark</title>
 <style type="text/css">
    .buttoner{
          background-color: #4CAF50;
          border: none;
          cursor: pointer;
          padding:12px 30px;
          display:inline-block;
          border-radius: 5px;
          color:#fff;
    }
    .tick{
      display:inline-block;
      position:relative;
    }
    .tick:after{
            content: '';
            position:absolute;
            right:11px;
            top:8px;
            display: block;
            width: 5px;
            height: 9px;
            border: solid #fff;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
    }
 </style>
</head>
<body>
<span class="tick"> <input type="button" class="buttoner" value="Clickable Button"/></input></span>

</body>
</html>

Answer №3

Take a look at this addition I made: 

<!DOCTYPE html>
<html>
<head>
    <title>Button with check mark</title>
     <style type="text/css>
        .button_box{
              background-color: #4CAF50;
              border: none;
              cursor: pointer;
              height: 48px;
              border-radius: 5px;
              width: 10%;
              position: relative;
        }
        .buttoner {
            background-color: transparent;
            border: none;
            display: block;
            width: 100%;
            height: 100%;
        }
        .button_box span {
            position: absolute;
            right: 0;
            top: 0;
        }
     </style>
</head>
<body>
<div class="button_box">
    <input type="button" class="buttoner" value="Click me"/>
    <span>&#10003</span>
</div>
</body>
</html>

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

Steps to create a dynamic <div> that is only visible within a parent <div>

First of all, I want to express my gratitude for welcoming me into the group. I am seeking assistance with an inquiry regarding jQuery animation. The specific animation in question can be seen on the navigation menu items of this template from Template Mon ...

javascriptjqueryhtmlcssanimation

Set the background color of the container row to extend the full width, encompassing

I am working on a grid container and I want to change the background color of the second row within it. Check out my Fiddle This is the HTML markup: <div class="totalContainer totalContainer__space"> <div class="totalContainer__ ...

htmlcss

Which is better for creating hover effects: CSS3 or JavaScript?

When hovering over a link, I want to highlight a specific picture and blur the rest. Here's my HTML code: <body> <div id="back"> <div id="one"></div> <div id="two"></div> </div> ...

javascripthtmlcss

transferring data between react components

I am currently working on breaking down code into smaller components, starting with the snippet below from Rows.jsx. I am struggling to grasp how props are passed between parent and child components. Despite reading several guides and articles, I remain un ...

javascriptreactjsdynamiccomponentsreact-props

Sorry, we couldn't locate the API route you are looking for

Within my Next.js project resides the file main/app/api/worker-callback/route.ts: import { NextApiResponse } from "next"; import { NextResponse } from "next/server"; type ResponseData = { error?: string }; export async function PO ...

javascriptnext.js

What is the process for embedding a 3D model using three.js into a specific div on a webpage?

Lately, I've been struggling with a persistent issue. I can't seem to figure out how to integrate my three.js scene into a div on my website. Despite watching numerous YouTube videos and reading countless articles on the topic, I still haven&apos ...

javascripthtmlcsswebthree.js

Integrating dynamic transition effects using Jquery Mobile for <div> elements

Just a friendly reminder, I must admit that my knowledge of Javascript is quite limited. I received a script from Padilicious to implement swipe navigation on my Jquery Mobile Site. It involves adding functions to a div tag like this: <div data-ro ...

javascripthtmlcssanimationjquery-mobile

PHP: Communicating Data with JavaScript

What if my PHP script requires some time to complete its operations? How can I keep the client updated on the progress of the operation, such as during a file download where the estimated time and data size need to be communicated? In PHP, calculating all ...

javascriptphpajaxcometdhtml

Add HTML to a div element using jQuery when content is replicated through JavaScript

I have encountered an issue while appending HTML from a dynamically created div using JavaScript. The problem arises when I try to append the HTML multiple times - each time it adds the content twice, thrice, and so on. This is possibly happening because i ...

javascriptjquery

How can I assign a specific class to certain elements within an *ngFor loop in Angular?

I have a situation where I am utilizing the *ngFor directive to display table data with the help of *ngFor="let record of records". In this scenario, I am looking to assign a custom CSS class to the 'record' based on specific conditions; for exam ...

javascriptcssangulartypescriptangular5

Encountering a tIDENTIFIER syntax error while trying to include a button_tag in Rails

Currently, I am in the process of developing a rails application and my aim is to incorporate a button that executes a javascript onclick function. The code snippet I am using for this purpose is: <%= button_tag "Action" type: "button", onclick: "test( ...

javascripthtmlruby-on-railsrubysyntax

What is preventing me from applying styles to the first word in my Angular ngFor iteration?

I'm currently attempting to customize the initial word of a string within my Angular ngFor loop. Strangely, the class gets applied but the style defined in my CSS file is not. Inline styling also does not seem to work - any ideas why? This is the CSS ...

htmlcssangulartypescript

Express.js using GET request to retrieve all data entries from the database

I am facing a challenge in retrieving specific user data using the GET method on Express.js through a Form. Instead of returning only one user's information, it is currently returning all values when the form is used. Here is the code from index.html ...

javascriptnode.jshttpexpress

Exploring the integration of Bootstrap Confirmation into an ASP.NET web page

I'm currently working on implementing Bootstrap Confirmation (http://ethaizone.github.io/Bootstrap-Confirmation/#top) on an ASP.NET web page using C#, but I've encountered some issues. Master Page References <asp:ScriptReference Path="Script ...

javascriptc#jqueryasp.nettwitter-bootstrap

NextJS hot reload with Docker is a powerful combination for seamless development environments

I've encountered issues trying to configure hot reload with Docker and NextJS. When I make changes and save a file, the server does not reload. Below is the contents of the docker-compose.yml: version: '3' services: mainapp: build: ./ ...

javascriptdockernext.js

The appearance of unnecessary empty spaces at the conclusion of the page

.article-image1 { height: 256px; width: 256px; } .article-image1:before { content: ''; position: absolute; height: 100%; width: 100%; top: 0; left: 0; background-image: url(http://limootoys.com/wp-content/uploads/gentleman-e150 ...

htmlcss

How can a parameter be added to a query string only when there is a value present in a textbox using JavaScript?

Hello everyone, I am looking to add parameters to a URL only if the search text box value is different from the default. I have three search text boxes and I want to include them in the URL. Below is my code snippet: $("#search-btn").click(function (e) { ...

javascriptjqueryajaxservlets

Problem with <meta> tag occurring when initial-scale is adjusted

Initially, in the index.html file: <meta name="viewport" content="width=device-width, initial-scale=1" /> I decided to modify it to: <meta name="viewport" content="width=device-width, initial-scale=2" /> ...

javascripthtmlcssreactjsmeta-tags

What is the most effective method for manipulating and slicing a string based on character matching?

In this particular scenario, we are dealing with strings that follow this pattern: CP1_ctl05_RCBPAThursdayStartTimePicker_0_dateInput CP1_ctl05_RCBPAFridayStartTimePicker_3_dateInput CP1_ctl05_RCBPAMondayStartTimePicker_1_dateInput The goal is to extract ...

javascriptjqueryregexstringsubstring

Choosing a unique font style in CSS (OTF) - How to differentiate between bold, italic, etc. when using multiple OTF files?

I'm a little confused on how to implement @font-face in my current project. The client handed over multiple font files including FontName-Black.otf, FontName-BlackItalic.otf, FontName-Bold.otf, FontName-BoldItalic.otf, and more. My usual approach wou ...

cssfont-face