Adding an HTML arrow icon within a button

As I work on creating an HTML email, my aim is to incorporate a right arrow onto an HTML button. To achieve this, I have opted to utilize a special character and apply the transform-rotate property.

However, I am facing an issue where the text and arrow are appearing on separate lines. How can I ensure that the text and the arrow are displayed on the same line? I made an attempt using whitespace:no-wrap on the td element, but unfortunately, it did not produce the desired result. Below you will find the snippet of code:

<tr>
    <td class="call-to-action" align="center">
        <button type="button" class="call-to-action1" value="Schedule Online Here" style="white-space:nowrap">SCHEDULE ONLINE HERE
            <h1 class="little-arrow" style="-ms-transform: rotate(270deg);transform: rotate(270deg);-webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */; color: white; font-size:14px">&#8711</h1></button>
    </td>
</tr>

htmlcssemailhtml-email

Answer №1

The arrow is splitting into the next line because you are using an h1 tag for the arrow, which is a block element. To keep it on one line, you should use a span instead.

<tr>
    <td class="call-to-action" align="center">
        <button type="button" class="call-to-action1" value="Schedule Online Here" style="white-space:nowrap">SCHEDULE ONLINE HERE
            <span class="little-arrow" style="-ms-transform: rotate(270deg);transform: rotate(270deg);-webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */; color: white; font-size:14px; display: inline-block">&#8711</span></button>
    </td>
</tr>

When using h1, you can achieve the same layout by utilizing the same h1 tag. Simply apply display:inline-block to keep them in one line:

.button,
.little-arrow {
  display: inline-block
}

.little-arrow {
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  /* Chrome, Safari, Opera */
  ;
  color: white;
  font-size: 14px;
  color: red
}
<tr>
  <td class="call-to-action" align="center">
    <button type="button" class="call-to-action1" value="Schedule Online Here">SCHEDULE ONLINE HERE
      <h1 class="little-arrow">&#8711;</h1></button>
  </td>
</tr>

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 use of event.returnValue is outdated and no longer supported. It is recommended to use the standard event.preventDefault() method instead. You may encounter

Hey there :) Currently, I am utilizing JQuery 1.9.1.js to search records using JSON. I am able to retrieve the search list locally, but when attempting to publish it on Windows Server 2008 and IIS 7, I face issues as it throws an error stating "event.ret ...

jqueryjsonhtmlasp.net-mvc-4

How can you refresh the .replaceWith method in jQuery?

Is there a way to reset the .replaceWith function so that the html, css and javascript elements are restored to their original state? I am looking to have an icon replace the text when the user clicks on "contact", and then have the text return when the u ...

javascriptjqueryhtmlcssreplacewith

Grabbing only the button element using jQuery when a click event occurs

HEY THERE! I have a simple question that I need help with. To better explain the issue, I've included a small code snippet below. The problem I'm facing is related to grabbing the id of a button. Everything works fine except when I click on any ...

javascriptjqueryhtml

Github not recognizing CSS styles

Currently working on a website to showcase the games I've developed, but encountering issues with applying my CSS. The code can be found here. As a novice in HTML and CSS coding, I've tried numerous codes and tutorials without success. ...

htmlcssgithub

Achieving a fixed 16:9 aspect ratio for the VLC web player: a detailed guide

Below is the HTML code provided: <embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" version="VideoLAN.VLCPlugin.2" width="600" height="350" id="vlc" loop="yes" autoplay="yes" target="myvideo ...

htmlvlc

Ways to Customize <td> Elements Within a <table> Container

Currently, I am utilizing jsp along with css to style the <td> within the <table> tag. My desired code format is shown below: https://i.sstatic.net/WJjA8.png However, what I am currently receiving is: https://i.sstatic.net/bLyvd.png #beng ...

htmlcss

Having trouble implementing a transition on a dropdown menu in React

Can anyone help me troubleshoot an issue with adding a transition to a select box that appears when clicking on an input field arrow? I have tried implementing a CSS transition property, but it doesn't seem to be working. Any suggestions on what might ...

javascripthtmlcssreactjssass

Presentation - hyperlink only functioning for final slide

I have a question about Lean Slider, which you can check out at My goal is to link each slide to a different URL. However, I'm facing an issue where only the code in the last slide seems to be executed and applied to all other slides. For example, if ...

javascriptjqueryhtmlslideshow

I am attempting to utilize Ajax in order to transfer information to a different webpage

It's a bit complex and I can't figure out why it's not working. My goal is to create a page with textboxes, dropdown lists, and a datagrid using easyui. The issue arises when I select something from the dropdown list - I want two actions to ...

javascriptphpjqueryhtml

Eliminate the empty space that separates the text from the border

I'm looking to adjust the spacing between my number and its top and bottom borders. https://i.stack.imgur.com/UYFpX.png Currently, the number takes up the full width but leaves empty space above and below it. Any suggestions on how I can make it fi ...

htmlcss

Curious about the distinction between express-ejs-layouts and DHTML?

According to Google search results, DHTML involves generating HTML content dynamically using Javascript. Meanwhile, EJS also claims to do the same thing with its abbreviation of Embedded JavaScript. It seems like both DHTML and EJS have similar functional ...

htmlexpressejsdhtml

center text above images in flexbox when page is resized

When resizing the page, I'm facing an issue where the links overlap with the images in a flexbox layout. It seems like the padding and margin between the images and links are not working due to them not being "related" or connected. I believe I need t ...

javascripthtmlcss

Discovering the art of incorporating various color palettes within a single stylesheet using HTML

I'm curious about incorporating multiple color schemes into a single stylesheet that can be activated by clicking, similar to the functionality found in platforms like WordPress and Magento. These platforms offer themes with various color options avai ...

javascripthtmlcss

Is it possible to modify the class attribute of an HTML element in PHP upon clicking an input?

In this assignment, I am restricted to using only PHP and cannot incorporate JavaScript. Currently, my code is set up to detect a post from an input type="submit" and then check for empty or filled text inputs. The code currently echoes text based on the c ...

phphtml

Storing additional data from extra text boxes into your database can be achieved using AJAX or PHP. Would you

A dynamic text box has been created using Jquery/JavaScript, allowing users to click on an "Add More" button to add additional input boxes for entering data. However, a challenge arises when attempting to store this user-generated data in a database. Assi ...

javascriptphpjqueryhtmlajax

What options do I have for personalizing this Google Bar Graph?

I am currently working on creating a Google bar chart. You can view my progress here: http://jsfiddle.net/nGvdB/ Although I have carefully reviewed the Google Bar Chart documentation available here, I am struggling to customize the chart to my needs. Spec ...

javascripthtmlajaxgoogle-visualization

CSS guidelines for handling single line breaks with the white-space property set to pre-wrap

Is it considered acceptable to include solitary carriage return characters in an HTML block styled with white-space: pre-wrap? I am working with an application that receives SOAP messages and logs them to a file. The logging process involves removing new- ...

htmlcssnewline

Tips for creating shaped images using clip-path

Can an image be clipped to match a specific shape using the clip-path CSS property? Original Image https://i.stack.imgur.com/rYeuk.jpg Desired Result with CSS https://i.stack.imgur.com/6FYfn.png ...

htmlcssclip-path

After calling AJAX, jQuery fails to execute

Encountering an issue with JQuery on a dynamic page. I have a select input: <select id="select"> <option value="1">1</option> <option value="2">2</option> </select> and a text input: <input id="input" type= ...

jqueryhtmlajax

Tips for personalizing the FileField in wtforms to function as an image button

I'm attempting to display an image from my project's directory as an icon instead of the standard "choose file" button. Unfortunately, my attempts thus far have been unsuccessful. Not only is the image not loading, but the original button is only ...

htmlcsswtforms