Attempting to design a button with an arrow icon

I need help creating a button with an arrow similar to the image below:

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

However, my current code is producing a button that looks like this:

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

This is my code snippet:

.ms-btn,
.ms-btn:hover {
  border: 2px solid #3E5B73;
  color: #3E5B73;
  font-size: 12px;
  font-family: 'Ubuntu';
  border-radius: 40px;
  padding: 16px 28px;
  position: relative;
  background: transparent;
  transition: 0.3s all linear;
}

.ms-btn:before {
  content: url(../img/image-left.svg);
  position: absolute;
  left: -15px;
  top: 23%;
  /*background: #fff;*/
  padding: 5px;
  height: 24px;
  display: flex;
  transform: translateX(0px);
  transition: 0.3s all linear;
}
<a class="ms-btn" href="">LEARN MORE</a>

I am looking for a CSS solution to adjust the button borders so they align properly with the arrow. Any suggestions are welcome!

htmlcssbootstrap-4

Answer №1

To enhance your code, include the background-color property for the 'svg' element and adjust its top position accordingly.

div {
  padding: 20px;
}
.ms-btn,
.ms-btn:hover {
  border: 2px solid #3E5B73;
  color: #3E5B73;
  font-size: 12px;
  font-family: 'Ubuntu';
  border-radius: 40px;
  padding: 16px 28px;
  position: relative;
  background: transparent;
  transition: 0.3s all linear;
}

.ms-btn:before {
  content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yMS44ODMgMTJsLTcuNTI3IDYuMjM1LjY0NC43NjUgOS07LjUyMS05LTcuNDc5LS42NDguNzY0IDcuNTI5IDYuMjM2aC0yMS44ODR2MWgyMS44ODN6Ii8+PC9zdmc+');
  position: absolute;
  left: -15px;
  top: 15%;
  background: #fff;
  padding: 5px;
  height: 24px;
  display: flex;
  transform: translateX(0px);
  transition: 0.3s all linear;
}
<div>
  <a class="ms-btn" href="">LEARN MORE</a>
</div>

Answer №2

Utilize the clip-path property to create a unique border style. Two CSS variables have been included for customization:

.custom-button {
  --offset: 15px;
  --border-width: 10px;
  
  display: inline-block;
  margin: 50px;
  color: #3E5B73;
  font-size: 12px;
  padding: 16px 28px;
  position: relative;
  transition: 0.3s all linear;
}

/* border design */
.custom-button:before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid #3E5B73;
  border-radius: 40px;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 calc(50% + var(--offset)),var(--border-width) calc(50% + var(--offset)),var(--border-width) calc(50% - var(--offset)),0 calc(50% - var(--offset)));
}

/* arrow shape */
.custom-button:after {
  content: "";
  position: absolute;
  left: -10px;
  top: calc(50% - 10px);
  background: red;
  height: 20px;
  width: 20px;
}
<a class="custom-button" href="">DISCOVER MORE</a>

Answer №3

To achieve a similar style to what you desire, I have made some adjustments as outlined below. I have removed the left border and reduced the top and bottom left border radius. Feel free to adjust these values to suit your preferences. The arrow design does not require a background color and should address your issue effectively.

div {
  padding: 20px;
}
.ms-btn,
.ms-btn:hover {
  border-width: 2px 2px 2px 0px;
  border-color: #3E5B73;
  border-style: solid;
  color: #3E5B73;
  font-size: 12px;
  font-family: 'Ubuntu';
  border-radius: 20px 40px 40px 20px;
  padding: 16px 28px;
  position: relative;
  background: transparent;
  transition: 0.3s all linear;
}

.ms-btn:before {
  content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yMS44ODMgMTJsLTcuNTI3IDYuMjM1LjY0NC43NjUgOS03LjUyMS05LTcuNDc5LS42NDUuNzY0IDcuNTI5IDYuMjM2aC0yMS44ODR2MWgyMS44ODN6Ii8+PC9zdmc+');
  position: absolute;
  left: -25px;
  top: 15%;
  padding: 5px;
  height: 24px;
  display: flex;
  transform: translateX(0px);
  transition: 0.3s all linear;
}
<div>
  <a class="ms-btn" href="">LEARN MORE</a>
</div>

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

Ways to dynamically adjust the color of the text font?

Below is the XML content: span style="background-color: rgb(255, 255, 0); The background color mentioned here is linked to my Java code. Since this color changes dynamically, it varies in each report. My inquiry is about how to incorporate this color in ...

htmlcolorsjasper-reportsireport

Maintain the fixed position of the table header while scrolling

I am facing an issue with my table setup - I want the header to stay fixed while scrolling through the body. Here is how my table structure looks: <table> <thead> <tr> <th>Header 1</th> ...

jqueryhtmlcsshtml-tablecss-position

Is it possible to embed a Microsoft Teams meeting within an Iframe?

Is it possible for MS Teams to provide a URL of a video meeting that can be embedded in external locations, such as an iframe on my website? I attempted to add it like this: <iframe src="https://teams.microsoft.com/l/meetup-join/19%3ameeting_N2E3M ...

javascripthtmliframemicrosoft-teamsx-frame-options

Customizable Button component featuring background image options

Need help with creating a versatile Button component in React that can easily accommodate different sizes and shapes of background images? This is how my current implementation looks like - Button.js const Button = ({ url }) => { const inl ...

htmlcssreactjsbuttonbackground-image

css Repaint the CSS by filtering out list items with odd indexes

Having a list of over 20 items, I utilized the :nth-child(2n+1) selector to alternate the background color (even item in black, odd item in white). However, when using the jQuery Isotope plugin to filter out specific items by adding a .isotope-hidden class ...

jquerycssfiltercss-selectorsjquery-isotope

What is the best way to split the children of a parent div into four distinct styling regions using the nth-child selector?

Imagine having a square parent container with 100 child elements of equal sizes, as illustrated below. How can you use the :nth-child selector to target and style the children in the top-left, bottom-left, top-right, and bottom-right corners separately? ...

csssassresponsive-designcss-selectorsless

JavaScript: How can I remove it when I click anywhere on the webpage with onClick?

A challenge I'm facing involves creating a form with an input field that changes its border color when clicked. My goal is for the border to return to its original color when clicking anywhere else on the page. -HTML <form action=""> ...

javascripthtmlcss

Having issues with jQuery Overlay functionality on Internet Explorer 8

Sorry if this question has already been addressed elsewhere, but I wasn't able to locate any information on it. I am currently using jQueryTools Overlay which is functioning properly in Chrome. However, I am encountering an issue in IE-8 where my ove ...

jqueryhtmlcssuser-interfaceoverlay

ASP.NET Expandable Navigation Bar

I'm struggling to create a collapsible navigation bar for my website that works well on mobile devices. Here's the code for my navigation bar: <div style="padding-bottom: 50px;"> <header id="main-header"> <div ...

htmlcssasp.nettwitter-bootstrap

Transform a button into an AngularJS directive

Is there a way to create a custom directive in HTML to represent a button? For example: <buy-button></buy-button> Here is the code that I would like to change: <md-button class="md-cornered" ng-disabled="0>=gains" ...

javascripthtmlangularjsangularjs-directive

I'm looking to adjust the padding on the left and right sides of the v-select menu checkbox in Vuetify 3. How

While trying to reduce the left padding of the v-select menu checkbox using the F12 debugger, I encountered an issue where the menu suddenly disappears when clicked. This makes it difficult to see the active menu. Attached is a screenshot of the select me ...

cssvue.jsdrop-down-menuvuetify.jsdropdown

Unusual syntax in Symfony framework

I am currently working on a new project for a website using the Symfony3 framework, and I have encountered an issue with understanding the syntax in Twig: <li><a href="{{ path('contact') }}">{{ 'site.template.menu.contact'| ...

phphtmltwigsymfony

JavaScript Radio Buttons

Below are the different radiobuttons: Apple <input type="radio" id="one" name="apple" data-price="10" value="light"/> Light <input type="radio" id="two" name="apple" data-price="20" value="dark" /> Dark <input type="text" id="appleqty" name ...

javascripthtmladdition

Setting a fixed data value within a div for subsequent retrieval through a function

I found a helpful example that demonstrates how to convert numbers into words. You can check it out here. The function for converting numbers into words is implemented in the following HTML code: <input type="text" name="number" placeholder="Number OR ...

javascriptjqueryhtml

Adjusting height in Google Maps to fill the remaining space

Currently, I am developing a map application where I want the Google Maps DIV to occupy the remaining height under the header. Here is the code snippet: <!DOCTYPE html> <head> <title>Map Application</title> <style type ...

javascripthtmlcssgoogle-mapsgoogle-maps-api-3

Displaying markers on a Google map by fetching data from a MySQL database in PHP

The image attached here serves as an example. You can view it here. Currently, I display locations on a map in an HTML page with static code like: Here is the JavaScript code to load the map on the page: <script type="text/javascript" src="https://ma ...

javascriptphphtmlmysqlcss

An element in CSS that has a position of fixed and a width of 100% surpasses the dimensions of its

My element has the CSS properties position:fixed and width:100%, causing it to be larger than its parent elements. Despite the complexity of my code, I have attempted to simplify it for better understanding. Below, you can see that the green box exceeds ...

javascripthtmlcss

Ensure that the Div element remains visible on the screen while contained within a

Is there a way to maintain the position of elements on the right side of a div without using position: fixed, while still keeping the div within its parent container? See the desired layout. I need the "Stays in view" element to stay within its parent div ...

htmlcss

Troubleshooting the issue with the <div> tag in ASP.NET MVC 2 and the "float: left;" property. Any solutions to

Issue with the usage of <div> elements Everything runs smoothly: Text "Whatever" appears in column 1, followed by a radio button: No issues here (text without a radio button): The cell immediately following the text "Whatever" should display in co ...

htmlcssasp.net-mvc-2

Exploring the world of mobile 3D transformations

I'm hoping to find a way to incorporate 3D transformations by utilizing the accelerometer on mobile devices within the following JavaScript code. Any assistance is greatly appreciated! $(document).mousemove(rotateScene); }); function rotateScene(e) ...

javascriptcssmobileaccelerometer