Create a stunning border image with a touch of transformation

Dealing with a button dilemma here. The client wants the border to also be the image, which is creating quite the challenge for me. Changing the box is no problem, but the tricky effect on the next button is preventing me from making the necessary adjustments.

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

While the border-image can be added successfully to this button, the arrow appears distorted as it's an after-effect element. This makes applying the border-image correctly a bit of a headache. Any assistance would be greatly appreciated!

Check out the website:

htmlcssfrontend

Answer №1

body {
         background-color: #7e7e7e;
     }

        .theme-btn {
            width: 300px;
            height: 50px;
            display: flex;
            align-items: center;
            padding: 10px;
            border: 2px solid #ffee02;
            background-color: transparent !important;
            background-image: url(https://skyrocketdigitalmarketing.designthatranks.com/wp-content/uploads/2023/05/Bg-2.png) !important;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            transition: all .2s;
            color: white !important;
            text-shadow: 1px 1px 7px rgba(0, 0, 0, 1);
            position: relative;
        }

        .theme-btn::after {
            content: "";
            background: #ff1d1d;
            width: 59px;
            height: 100%;
            position: absolute;
            right: -20px;
            z-index: 0;
            transform: skew(-24deg, 0deg);
            transition: 0.5s ease-in-out;
            background-image: url(https://skyrocketdigitalmarketing.designthatranks.com/wp-content/uploads/2023/05/Bg-2.png) !important;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            border: 2px solid #ffee02;
        }

        .theme-btn a {
            color: #ffee02;
            text-decoration: none;
            font-size: 22px;
        }

        .theme-btn i {
            width: 40px;
            height: 100%;
            position: absolute;
            top: 0px;
            right: 4px;
            z-index: 1;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
        }

        .theme-btn i::after {
            content: "";
            background: black;
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: -1;
            transform: skew(-24deg, 0deg);
            transition: 0.5s ease-in-out;
        }

<div class="theme-btn">
   <a href="">
      <span>
          Discover Packages 
      </span>
      <i class="fas fa-angle-double-right"></i>
   </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

Issue with locating css and js files in Laravel 6 (net::ERR_ABORTED 404 (Not Found))

While everything works fine when I use the Laravel development server (php artisan serve), I encounter a 404 error when attempting to use XAMPP server for the Laravel auth login and register pages. I typically use href="{{ asset('css/app.css') } ...

javascriptcsslaravelxampp

Ensure that all values are in a single row on the webpage

I'm currently working on a web application that requires a label, textbox, and button to be aligned in one row. However, they are displaying in separate rows. Below is the code I have been using: <div class="form-group row"> <label clas ...

html

Avoiding duplicate clicks on image map regions

Looking for a solution to prevent the DoStuff() method from being executed twice in a double-click scenario on my basic image map. The current setup runs the routine whenever an area is clicked, but causes issues with double-clicking. Any suggestions on ...

javascriptjqueryhtmldouble-click

JQuery not properly validating inputs with required attributes after creation

I am currently developing a contact form that includes an "alternative address" <div id='alt'> with toggleable visibility. Inside this div, there is a required <input> field. I encountered an issue where toggling #alt twice (thus hidi ...

javascriptjqueryhtmlcsscakephp

Utilizing Font Awesome icons within a JSON structure

I'm running into a bit of trouble trying to display font awesome icons. The text is written in json using a rakefile, and I'm attempting to insert a font awesome icon within the text. However, I'm facing difficulties because the text is in j ...

cssruby-on-railsjsonangularjs

How to place a circle below text using CSS

I'm attempting to center a 5px x 5px circle under the links in a navigation bar to indicate the current page, but I'm uncertain about how to achieve this effect. Here is the current outcome: Link to Image This is what I aspire to accomplish: Li ...

htmlcssshapes

Replacing content in a <div> using .html()

I've been looking everywhere for a solution to this problem, but nothing I find seems to be relevant. Apologies if there is a similar question already out there. My goal is to have multiple pages displayed on just one index.html page, so I'm att ...

jqueryhtmlreplacewith

Integrate JavaScript code with HTML pages

After creating a basic HTML structure that I am proud of, I encountered some challenges with getting the Javascript to function properly. I am new to working with Javascript and received some initial assistance, but unfortunately, it is no longer working. ...

javascriptjqueryhtmljsonajax

Guide to updating Django model-based form records with choices option using an HTML form

I have a pre-existing model called ShiftChange that I am trying to update. In the model-based form, I have used CHOICES as follows: from django.db import models ====== ============= ) class ShiftChange(models.Model): ...

htmlpython-3.xdjangodjango-formsdjango-templates

Render the template using the data retrieved from a function that was recently executed in Flask

While attempting to display a flask template using the output of a function, an error message pops up saying "y value is not defined" The function in question: functiona (x): y=x+1 return y My flask application snippet: @app.route('/exampl ...

pythonhtmlflask

"Unveiling the invisible: Revealing hidden characters in PHP

Currently I am dealing with some code extracted from a MySQL column. Within this code are hidden characters like "\t" and "\n". I am attempting to showcase the raw code in a DIV while also making sure these hidden characters are visible. The cod ...

phphtmlcharacter-encoding

Guide to aligning text vertically in a column alongside an image using Bootstrap 5

I have been using the Bootstrap 5.3.2 grid system for most of my website. I am trying to create a layout with an image on the left and text on the right. However, I am facing an issue with aligning the text vertically in the column. Is there a way to achie ...

cssbootstrap-5

The try and catch block in JavaScript is failing to correctly capture the HTTP status

I have a function that successfully posts JSON to an API endpoint. Here is the code I am using: function sendValuesPageLoad(){ var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { try { if (xhr.readyState === ...

javascripthtmljsonxmlhttprequest

Issue with Bootstrap Modal failing to display the dialog box

I have been attempting to incorporate a Bootstrap Modal for quite some time now. Despite following the guidelines in the bootstrap documentation, I am still unable to get it to work properly. Any ideas why this jsfiddle link is not functioning as expected? ...

javascriptcsshtmltwitter-bootstrap-3bootstrap-4

Why is the Django image URL redirecting to an HTML template instead of the media file?

I created a Django application with a template that includes an image. However, I encountered an issue where the server is attempting to display the image using the redirect link from the HTML template instead of retrieving it from the media file. For ins ...

htmldjangourlhttp-redirectdjango-templates

Customize the appearance of radio buttons in HTML by removing the bullets

Is there a way for a specific form component to function as radio buttons, with only one option selectable at a time, without displaying the actual radio bullets? I am looking for alternative presentation methods like highlighting the selected option or ...

javascripthtmlcssprogressive-enhancementgraceful-degradation

Retrieve the value from another select element

Is there a way to create a function in pure JavaScript that changes the selected options in two select tags based on each other? For example, if I choose a French word in one select tag, the English equivalent automatically changes in the other select tag ...

javascripthtmlselect

Using the useState hook in a Node.js backend and React frontend: a comprehensive guide

How can I use useState in my HTML file that already uses node.js? const {useState} = React Below is the code snippet: const {useState} = React; function App(){ const {text, setText} = useState("Hello world") console.log(text); function handleClick(){ se ...

javascripthtmlnode.jsreactjsexpress

Adjusting the flex columns to be mobile-friendly for various screen sizes, I noticed that the HTML text is spilling over into the adjacent section and the columns appear to

Hi everyone, I've been diligently working on my portfolio website and I'm thrilled that it appears responsive on mobile devices, my Macbook Air, and both of my desktop monitors. However, I've encountered an issue on my Lenovo laptop where th ...

cssbootstrap-4flexboxresponsive-designmedia-queries

Is there a way for me to retrieve the input text value and display it in my modal window?

When using jQuery, I want my text field to appear in my modal. The code seems to work fine when I check the checkbox, but nothing shows up when I try to use the text field. How can I resolve this issue? Body <body> <div id="hasildetail" clas ...

javascriptjqueryhtmlbootstrap-4bootstrap-modal