A more sophisticated approach to button creation, such as utilizing a single HTML element

Trying to find a sleeker way to create the following HTML button.

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

Currently using an <a href="..."> with 2 child <span> elements like this: -

<a href="">
    <span class="box_button">Read more</span>
    <span class="box_button_arrow">&gt;</span>
</a>

The CSS appears as follows: -

span.box_button {
  display: block;
  float: left;
  padding: 6px 10px 8px 10px;
  border: 4px solid white;
  color: white;
}
span.box_button_arrow {
  display: block;
  float: left;
  color: white;
  padding: 6px 10px 8px 10px;  
  border-top: 4px solid white;
  border-right: 4px solid white;
  border-bottom: 4px solid white;
}

Note that the arrow span lacks a border on its left side.

Code pen link - http://codepen.io/bobmarksie/pen/bEPVgM

Is there a way to replace the 2 spans with a single HTML element?

htmlcss

Answer №1

To achieve this, you can utilize the ::after pseudo-element. This approach allows you to eliminate the need for the span elements. Below is an updated version of your example:

div.info_box {
  float: left;
  width: 230px;
  height: 230px;
  padding: 40px;
  background: #A95563;
  color: white;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
} 
div.box_title {
  font-size: 22px;
  padding: 0px 0px 20px 0px;
}
div.box_main {
  font-size: 16px;
  line-height: 120%;
  height: 120px;
}
a.box_button {
  border:4px solid #fff;
  color:#fff;
  display:inline;
  padding:6px 10px 8px 10px;
  text-decoration:none;
}
a.box_button::after {
  border-left:4px solid #fff;
  content:">";
  margin-left:10px;
  padding:6px 0px 8px 10px;
}
<div class="info_box">
  <div class="box_title">My title</div>
  <div class="box_main">The quick brown fox jumps over the lazy dog</div>
  <a class="box_button" href="">Read more</a>
</div>

You can view a live demo on Codepen here: http://codepen.io/anon/pen/JGQYyG

Answer №2

Let's enhance the semantics of the button and style it using CSS. Below is the basic HTML structure:

<button class="button">
  Read more
</button>

The CSS code does most of the work here. When you execute the snippet, it's hard to distinguish between this and the original design.

a {
  text-decoration: none;
}

button.button {
  background: transparent;
  border: 4px solid white;
  color: white;
  display: block;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 16px;
  padding: 7px 46px 7px 10px;
  position: relative;
}

button.button:after {
  border-left: 4px solid white;
  content: ">";
  padding: 7px 10px;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0
}


a {
  text-decoration: none;
}
div.info_box {
  float: left;
  width: 230px;
  height: 230px;
  padding: 40px;
  background: #A95563;
  color: white;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
} 
div.box_title {
  font-size: 22px;
  padding: 0px 0px 20px 0px;
}
div.box_main {
  font-size: 16px;
  line-height: 120%;
  height: 120px;
}

a {
  text-decoration: none;
}

button.button {
  background: transparent;
  border: 4px solid white;
  color: white;
  display: block;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 16px;
  padding: 7px 46px 7px 10px;
  position: relative;
}

button.button:after {
  border-left: 4px solid white;
  content: ">";
  padding: 7px 10px;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0
}
<div class="info_box">
  <div class="box_title">My title</div>
  <div class="box_main">The quick brown fox jumps over the lazy dog</div>
  <a href="">
    <button class="button">
      Read more
    </button>
  </a>
</div>

Answer №3

To accomplish this, utilize the :after selector

 <a href="">
    Read more
 </a>

a:after {
  content: ">";
}

Answer №4

Vertical center text using line-height and simplify with the ::after pseudo-element for a more streamlined approach

CodePen

div.info_box {
  float: left; width: 230px; height: 230px; padding: 40px; background: #A95563;
  color: white; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
div.box_title { font-size: 22px; padding: 0px 0px 20px 0px; }
div.box_main { font-size: 16px; line-height: 120%; height: 120px; }

.box_button {
  display: block;
  float: left;
  line-height: 40px;
  padding: 0 0 0 10px;
  border: 4px solid white;
  color: white;
  text-decoration: none;
}
.box_button::after {
  content: '>';
  /* equal spacing on both sides */
  margin-left: 10px; 
  width: 40px;
  text-align: center;
  display: inline-block;
  border-left: 4px white solid;
}
<div class="info_box">
  <div class="box_title">My title</div>
  <div class="box_main">The quick brown fox jumps over the lazy dog</div>
  <a href="" class="box_button">
  Read 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

How come when you add ({}+{}) it equals to "[object Object][object Object]"?

I ran the following code: {}+{} = NaN; ({}+{}) = "[object Object][object Object]"; What is the reason behind the difference in result when adding ()? ...

javascripthtmlnode.js

Format specific words or characters in a text input

In HTML, when I want to display strings in a Text Input or TextArea, I am looking for a way to have specific substrings render with a box around them. I envision these boxed substrings as being treated as a single entity, similar to how highlighting or tex ...

javascripthtml

When a link is clicked, submit a form and send it to several email addresses simultaneously

My form has been styled using the uniform jQuery plugin. Instead of using an input type submit for submitting the form, I have utilized a link and added some effects to it to prevent it from being formatted with uniform. <form> <ul> ...

phpjavascriptjqueryhtmlforms

Integrate the dForm plugin with a convenient time picker widget

Currently, I am attempting to integrate a time picker widget into a jQuery plugin called dForm. The specific timepicker widget can be found at the following link: https://github.com/jonthornton/jquery-timepicker Despite reviewing the dForm documentation, ...

javascriptjqueryhtmlcssjquery-plugins

What is preventing me from translating an element using transform: translateY()?

I attempted to move the letter 'h' down by 40px on its own, but the translation only seems to work if I relocate the entire word. I also experimented with positioning 'h' absolutely relative to the parent element, but then 'ello&ap ...

htmlcss

What is the best way to stack a canvas box on top of another canvas box?

My goal is to have two canvas squares stacked on top of each other. While I am familiar with drawing on canvas, I need assistance in placing one canvas on top of another. Despite my attempts at setting the position, I have not been successful. <canvas ...

javascripthtmlcss

"Reduce the height of the navigation bar when the user scrolls down the webpage

I am having an issue with my fixed navigation bar created using bootstrap 4. I want to reduce the height of the navbar as I scroll down the page, but it does not seem to be working. Here is a link to a video showing the problem in action: Link to the vide ...

jqueryhtmlcss

Is there a way to incorporate cell highlighting on IE?

I've implemented a method to highlight selected cells based on the suggestion from jointjs. It surrounds the cell with a 2-pixel red border, which works well in Chrome. However, I need the outline to work in IE as well. Unfortunately, when I reviewed ...

javascripthtmlsvgjointjs

How can I modify the appearance of the bootstrap scrollbar with scrollspy?

I'm struggling to modify the color of the scrollbar in Bootstrap scrollspy despite having a functional scrollbar. Here is an example of my code: HTML: <body> <div class="container, scrollbar" id="myScrollspy"> <div class=" ...

javascripthtmlcssbootstrap-4

What could be causing the whitespace around this element when using SASS from Refills / Bourbon.io?

I've recently started using the impressive SASS framework, Boubon.io created by the talented team at thoughtbot. As I experiment with their supplied templates (known as Refills), I'm finding that Bourbon.io serves as a versatile alternative to po ...

htmlcsssass

Update the class of the panel immediately prior to a click event

Is it possible to change the class before the animation starts or when opening/closing the panel? Currently, the class only changes after the animation has finished and the panel is already open or closed. Here is an example: http://jsfiddle.net/0b9jppve/ ...

jquerycsstwitter-bootstrap

How can I incorporate a string variable into an f-string in Python for printing?

Looking to display the user variable from a Python script in an HTML document? Here's a method to achieve this. my_python.py user = "myname" with open("../../html/forms/output.html") as output: print(output.readlines()) outpu ...

pythonhtmlpython-3.xf-string

Leveraging trustAsHTML with an array of object elements

I'm facing a challenge in passing an array of objects from an Angular Controller to the ng-repeat directive. The objects within the array have multiple properties, some of which may contain HTML that needs to be displayed using the ng-repeat. I' ...

javascripthtmlangularjs

I'm still unclear on the necessity of using clear:both

Presenting a simplified example of my previous query, I am still seeking clarification regarding the necessity of using clear:both to enable padding-top. Can someone provide a straightforward illustration to elucidate the usage of float and clear? Hence, ...

htmlcss

The visible overflow-x property is failing to display the excess content within the unordered list

Imagine having a complex bootstrap dropdown menu with over 100 li items. Each time you hover over an li, a new dropdown opens next to it. The problem arises when trying to make the list scrollable by setting max-height:300px; overflow-y:scroll; overflow-x ...

htmlcsstwitter-bootstrap

Unfortunately, the header and footer are not lining up correctly with the main body on our mobile site

I've been tasked with creating a fully responsive website, but I'm encountering difficulties with the mobile design. Specifically, when I switch to mobile dimensions like an iPhone 12, the header and footer don't line up properly with the ma ...

javascripthtmlcss

Creating an Innovative Grid Design with Varying Column Widths for Each Row

Seeking advice on achieving a specific layout using HTML. I have attempted to use HTML tables but struggled with creating rows with varying columns. Does anyone have recommendations for grid tools that may be more helpful? Thank you ...

htmlcsslayout

HTMLElement addition assignment failing due to whitespace issues

My current challenge involves adding letters to a HTMLElement one by one, but I'm noticing that whitespace disappears in the process. Here's an example: let s = "f o o b a r"; let e = document.createElement('span'); for (let i ...

javascripthtmltypescript

Working with jQuery, CSS, and functions to modify the current tag's class

Let's keep it brief and straightforward: Here is my HTML <div id="headerVideoControls" class="overlayElement"> <div id="videoMuteUnmute" onclick="muteUnmuteVideo('headerVideo')">mute button</div> </div> Edited ...

javascriptjqueryhtmlcssaddclass

The image source is unable to locate the image

Adding an image to my React component is proving to be problematic as the alternative text keeps being displayed instead. In the Navbar component, this is how I am trying to include the image: <img src="../assets/images/nav_logo.png" alt=&quo ...

htmlreactjsimageimagesource