Button #5

Give your rating
3.5
2 votes
    • 12+
    • 36+
    • 29+
    • 23+
    • 9+
    • 36+
    • 95+
    • 24+
    • 9+
    • 3+
    • 37+
Demo
  • 2.43 KB
  • HTML, CSS
  • Button
  • animation, submit
  • MIT License
HTML
<div class="panel blue">
  <button>Submit</button>
</div>
CSS
@import "https://fonts.googleapis.com/css?family=Comfortaa:300,400,700&subset=cyrillic,cyrillic-ext,latin-ext";
button {
    color: #9b51e0;
    background: transparent;
    border-width: 2px;
    border-style: solid;
    border-color: #9b51e0;
    position: relative;
    margin: 1em;
    display: inline-block;
    padding: 0.5em 1em;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    text-align: center;
    font-family: comfortaa;
    font-weight: bold;
}
.panel * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
button:before,
button:after {
    content: "";
    display: block;
    position: absolute;
    border-color: #9b51e0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-style: solid;
    width: 1em;
    height: 1em;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
button:before {
    top: -6px;
    left: -6px;
    border-width: 2px 0 0 2px;
    z-index: 5;
}
button:after {
    bottom: -6px;
    right: -6px;
    border-width: 0 2px 2px 0;
}
button:hover:before,
button:hover:after {
    width: -webkit-calc(100% + 12px);
    width: -moz-calc(100% + 12px);
    width: calc(100% + 12px);
    height: -webkit-calc(100% + 12px);
    height: -moz-calc(100% + 12px);
    height: calc(100% + 12px);
    border-color: #fff;
}
button:hover {
    background-color: #fff;
    border-color: #fff;
    cursor: pointer;
}
.blue button {
    color: #3bb4e5;
    border-color: #3bb4e5;
}
.blue button:before,
.blue button:after {
    border-color: #3bb4e5;
}
.blue button:hover:before,
.blue button:hover:after {
    width: -webkit-calc(100% + 12px);
    width: -moz-calc(100% + 12px);
    width: calc(100% + 12px);
    height: -webkit-calc(100% + 12px);
    height: -moz-calc(100% + 12px);
    height: calc(100% + 12px);
    border-color: #3bb4e5;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.blue button:hover {
    color: #3bb4e5;
    background-color: transparent;
    border-color: #3bb4e5;
}

Imagine you’re crafting a web page and want to make a button that not only looks cool but also reacts when someone hovers over it, adding a bit of flair to the user experience. This piece of code does exactly that. It uses HTML for structure, CSS for styling, and has a placeholder for JavaScript, probably intended for adding functionality later on.

First off, there’s a button wrapped in a div element with a class of blue. This button, when added to a web page, will be plain and simple, labeled “Submit”.

The real magic happens in the CSS. The button’s appearance is customized with a transparent background, a solid border, and a specific color scheme that changes when you hover over it. The hover effect is particularly interesting because it involves an animation that expands the border in a visually appealing way. This is achieved through the :before and :after pseudo-elements, which create additional elements on the page without needing more HTML. These elements are positioned absolutely relative to the button, and their size changes on hover, creating an animated effect that looks like the button is dynamically framed.

Moreover, the CSS incorporates transitions, making the changes in appearance smooth rather than abrupt. This provides a more polished look and feel. The code also takes advantage of CSS variables and calculations calc() to dynamically adjust sizes and positions, ensuring the hover animation looks consistent regardless of the button’s size.

Lastly, the button’s styling is sensitive to its parent’s class blue, meaning the color scheme can easily be adjusted by changing the class of the container. This demonstrates a flexible approach to styling that can be reused with different color schemes for different parts of a website.

In summary, this code snippet provides a stylish, animated submit button that enhances the user interface with a sophisticated hover effect, demonstrating how CSS can be leveraged to create engaging and responsive web components.

Menu