Broken Rectangle

The Broken Rectangle Hover Effect: A Creative Design Element for Your Website

The interactive broken rectangle is an innovative CSS creation designed to captivate users through its unique hover effect. This dynamic design showcases how simple elements like a rectangle can be enhanced using CSS to create interactive and visually appealing user experiences.

What Makes It Special?

The key feature of this rectangle is its ability to visually "break" when the user hovers over it. By default, the rectangle appears as a clean and complete shape. However, upon hover, a clever CSS technique makes the rectangle break open at a 90-degree angle on the top and right sides. This transformation provides a sense of interaction and fluidity, elevating what would otherwise be a static design.

How It Works

The magic of this rectangle lies in the use of CSS ::before pseudo-elements, paired with the transform and transition properties. Initially, the break is invisible. When the user hovers over the rectangle, the ::before pseudo-element becomes visible and rotates 90 degrees, giving the illusion of a break. The smooth transition effect ensures the animation is both subtle and engaging.

Why Use This Design?

This design is not only aesthetically pleasing but also functional. It can be used for interactive buttons, call-to-action elements, or even as part of a creative branding strategy. The hover effect adds depth to the user interface, making websites feel more dynamic and engaging.

Applications of the Broken Rectangle

Interactive buttons with hover effects
Call-to-action sections on websites
Creative highlights for specific content
Part of branding or logo animation

This rectangle's flexibility makes it a great choice for designers and developers looking to add interactivity to their projects.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Meta charset defines the character encoding for the document -->
    <meta charset="UTF-8">
  
    <!-- Ensures proper scaling and responsiveness on mobile devices -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
    <!-- Title of the webpage displayed on the browser tab -->
    <title>Broken Rectangle</title>
  
    <!-- Link to the external CSS file for styling -->
    <link rel="stylesheet" href="style.css">
  
  </head>
  <body>
    <!-- Main container for the rectangle with breaking and arrow effects -->
    <div class="broken-rectangle">
      <!-- Text displayed inside the rectangle -->
      <span class="button-text">subscribe!!!</span>

      <!--First arrow that appears when hovering (top-right corner)-->
      <div class="arrow"></div>

      <!--Second arrow that appears when hovering (top-right corner)-->
      <div class="arrow1"></div>
    </div>
     <!--Let's move on to css-->
  </body>
</html>

/* General Page Styles */
        body {
          margin: 0; /* Remove default margin around the body */
          height: 100vh; /* Make the body take the full height of the viewport */
          display: flex; /* Enable flexbox for centering content */
          justify-content: center; /* Center content horizontally */
          align-items: center; /* Center content vertically */
          background-color: black; /* Set the background color to black */
          font-family: Arial, sans-serif; /* Use Arial font with a fallback to sans-serif */
        }
        
        /* Main Rectangle Container */
        .broken-rectangle {
          position: relative; /* Position relative to allow absolute positioning for child elements */
          width: 200px; /* Set the rectangle's width */
          height: 60px; /* Set the rectangle's height */
          border: 2px solid white; /* Add a white border around the rectangle */
          color: white; /* Set the text color inside the rectangle to white */
          display: flex; /* Enable flexbox to align the text */
          justify-content: center; /* Center the text horizontally */
          align-items: center; /* Center the text vertically */
          text-transform: uppercase; /* Convert text to uppercase */
          font-weight: bold; /* Make the text bold */
          cursor: pointer; /* Change the cursor to a pointer when hovering */
        }
        
        /* Break the Top-Right Corner */
        .broken-rectangle::before,
        .broken-rectangle::after {
          content: ""; /* Create empty pseudo-elements */
          position: absolute; /* Position absolutely relative to the parent */
          background-color: black; /* Match the background color to "hide" the break */
        }
        
        .broken-rectangle::before {
          content: ""; /* Content is empty */
          position: absolute; /* Position at the top-right corner */
          top: 0; /* Align to the top edge */
          right: 0; /* Align to the right edge */
          width: 45px; /* Width of the broken corner */
          height: 45px; /* Height of the broken corner */
          background-color: black; /* Set background color to match body */
          opacity: 0; /* Initially make the break invisible */
          transition: all 0.1s ease; /* Add a smooth transition effect */
          transform: rotate(0deg); /* No rotation initially */
        }
        
        /* On hover: break at 90° angle */
        .broken-rectangle:hover::before {
          opacity: 1; /* Make the break visible */
          right: -20px; /* Move the break outward to the right */
          top: -20px; /* Move the break upward */
          transform: rotate(90deg); /* Rotate the pseudo-element by 90 degrees */
        }
        
        /* Arrow Animation */
        @keyframes slide-in {
          0% {
            opacity: 0; /* Start with the arrows hidden */
            transform: translate(10px, -10px); /* Start position: offset by 10px */
          }
          100% {
            opacity: 1; /* Fully visible at the end of animation */
            transform: translate(0, 0); /* End position: default placement */
          }
        }
        
        /* Top-Right Corner Highlight */
        .arrow,
        .arrow1 {
          position: absolute; /* Position absolutely relative to the rectangle */
          border-top: 6px solid #00f; /* Top border: blue highlight color */
          border-right: 4px solid #00f; /* Right border: blue highlight color */
          opacity: 0; /* Make the arrows invisible by default */
          top: -30px; /* Position above the rectangle */
          right: -25px; /* Position slightly outside to the right */
          width: 20px; /* Width of the arrows */
          height: 20px; /* Height of the arrows */
        }
        
        /* Initial Positions */
        .arrow {
          top: -10px; /* Adjust the first arrow closer to the rectangle */
          right: -10px; /* Position closer to the rectangle edge */
        }
        
        .arrow1 {
          top: -30px; /* Position further away vertically */
          right: -25px; /* Slightly offset horizontally */
        }
        
        /* Hover Effect: Animate the Arrows */
        .broken-rectangle:hover .arrow {
          animation: slide-in 0.3s ease-in-out forwards; /* Slide the first arrow into view */
        }
        
        .broken-rectangle:hover .arrow1 {
          animation: slide-in 0.3s ease-in-out forwards, blink 1s infinite alternate; /* Slide and blink animation for the second arrow */
          animation-delay: 0.1s; /* Add a slight delay for staggered animation */
        }
        
        /* Hover Effect: Change Text Color */
        .broken-rectangle:hover .button-text {
          color: #00f; /* Change text color to blue on hover */
          transition: color 0.3s ease; /* Smooth color transition */
        }

Conclusion

The interactive broken rectangle is a testament to the power of CSS in web design. By combining creativity with technical skills, it is possible to create engaging elements that enhance the user experience. Whether you're a beginner or an experienced developer, this design is a great example of what CSS can achieve when used effectively.