CSS Button #4 - Code Example

Demo

2.23 KB
HTML, CSS
Button
animation, submit
MIT License

Code
Editor

HTML

<div class="panel pink">
  <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 {
    color: #353535;
    background-color: #fff;
    border-color: #fff;
    cursor: pointer;
}
.pink button {
    color: #eb1777;
    border-color: #eb1777;
}
.pink button:before,
.pink button:after {
    border-color: #eb1777;
}
.pink button:hover:before,
.pink button:hover:after {
    border-color: #eb1777;
}
.pink button:hover {
    color: #fff;
    background-color: #eb1777;
    border-color: #eb1777;
}
.pink .panel {
    max-width: 960px;
    text-align: center;
    position: relative;
    margin: auto;
}

HTML
CSS

Let’s dive into a cool piece of code that makes a sumbit button on a webpage not just any button, but a button with style and flair. Imagine we’re painting a picture, but instead of brushes, we’re using CSS (that’s the code that styles web pages) to bring our button to life.

First off, we’ve got a button that lives inside a pink panel. It’s like setting the stage for our star performer. This button, when you first look at it, has a certain vibe thanks to its color and border, making it pop against the background.

Now, here’s where the magic happens. We’re not just satisfied with a good-looking animation button; we want it to perform! When you hover over this button, it doesn’t just sit there; it undergoes a transformation. The borders animate, expanding outwards, almost like it’s coming to life, eager for you to click it. This isn’t just any animation; it’s a carefully choreographed dance, with the borders changing color and expanding in a smooth, eye-catching way.

But what makes this button truly special is its style. We’ve chosen a font that’s easy on the eyes, making the button not only visually appealing but also inviting. The colors shift as you hover, going from a distinct pink to a white with a pink background, creating a striking contrast that’s hard to miss.

In essence, this piece of code is like a mini-performance on your webpage, with the button as the lead dancer. It’s a testament to how a little creativity with CSS can transform a simple action like clicking a button into an engaging, interactive experience.