Inspiration for Button Styles and Effects

    Rating: ★★★★☆
    View: 209
    Download: 186
    Từ khóa:

    The Markup

    Vote

    The common button styles are the following:

    /* Common button styles */
    .button {
    	float: left;
    	min-width: 150px;
    	max-width: 250px;
    	display: block;
    	margin: 1em;
    	padding: 1em 2em;
    	border: none;
    	background: none;
    	color: inherit;
    	vertical-align: middle;
    	position: relative;
    	z-index: 1;
    }
    
    .button:focus {
    	outline: none;
    }
    
    .button > span {
    	vertical-align: middle;
    }
    
    In some cases, we’ll have additional markup like a span or several spans inside of the button. The styles and effects might also be interesting for links; in that case you’ll need to replace the HTML with an anchor and adjust the styles accordingly.
    The following classes are available for controlling styles like borders, size and border-radius:
    
    /* Sizes */
    .button--size-s {
    	font-size: 14px;
    }
    
    .button--size-m {
    	font-size: 16px;
    }
    
    .button--size-l {
    	font-size: 18px;
    }
    
    /* Typography and Roundedness */
    .button--text-upper {
    	letter-spacing: 2px;
    	text-transform: uppercase;
    }
    
    .button--text-thin {
    	font-weight: 300;
    }
    
    .button--text-medium {
    	font-weight: 500;
    }
    
    .button--text-thick {
    	font-weight: 600;
    }
    
    .button--round-s {
    	border-radius: 5px;
    }
    
    .button--round-m {
    	border-radius: 15px;
    }
    
    .button--round-l {
    	border-radius: 40px;
    }
    
    /* Borders */
    .button--border-thin {
    	border: 1px solid;
    }
    
    .button--border-medium {
    	border: 2px solid;
    }
    
    .button--border-thick {
    	border: 3px solid;
    }

    Note that not all classes make sense for all buttons. Some effects depend on the use of pseudo elements which might be the carriers of the border, for example.
    The individual button styles do take care of most cases, though.

    Let’s have a look at “Itzel”:

    ButtonStyle_Itzel

    This effect uses a clip-path to cut out a piece of the border of the button’s pseudo-element. This will only work in browsers that support the property which does not include IE for now. For Firefox we need to use a SVG with a clipPath that we define in the HTML.

    For the effect we hide the pseudo element that has a clipped area at the bottom by pushing it down with a transform. We’ll pull it back up it’s border width by applying another transform. We can’t see it below because our button has its overflow hidden. The icon is also pushed down in the same way. When we hover, we make the text disappear by setting its opacity to 0 and let the icon slide up through the “hole”.

    /* Itzel */
    .button--itzel {
    	border: none;
    	padding: 0px;
    	overflow: hidden;
    	width: 255px;
    }
    
    .button--itzel::before {
    	content: '';
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;
    	border: 2px solid;
    	border-radius: inherit;
    	-webkit-clip-path: polygon(0% 0%, 0% 100%, 35% 100%, 35% 60%, 65% 60%, 65% 100%, 100% 100%, 100% 0%);
    	clip-path: url(../index.html#clipBox);
    	transform: translate3d(0, 100%, 0) translate3d(0, -2px, 0);
    	transform-origin: 50% 100%;
    }
    
    .button--itzel.button--border-thin::before {
    	border: 1px solid;
    	transform: translate3d(0, 100%, 0) translate3d(0, -1px, 0);
    }
    
    .button--itzel.button--border-thick::before {
    	border: 3px solid;
    	transform: translate3d(0, 100%, 0) translate3d(0, -3px, 0);
    }
    
    .button--itzel::before, 
    .button--itzel .button__icon {
    	transition: transform 0.3s;
    	transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
    }
    
    .button--itzel .button__icon {
    	position: absolute;
    	top: 100%;
    	left: 50%;
    	padding: 20px;
    	font-size: 20px;
    	transform: translate3d(-50%, 0, 0);
    }
    
    .button--itzel > span {
    	display: block;
    	padding: 20px;
    	transition: transform 0.3s, opacity 0.3s;
    	transition-delay: 0.3s;
    }
    
    .button--itzel:hover::before {
    	transform: translate3d(0, 0, 0);
    }
    
    .button--itzel:hover .button__icon {
    	transition-delay: 0.1s;
    	transform: translate3d(-50%, -100%, 0);
    }
    
    .button--itzel:hover > span {
    	opacity: 0;
    	transform: translate3d(0, -50%, 0);
    	transition-delay: 0s;
    }

    There are a couple of issues with (Mobile) Safari especially with having a border-radius and overflow hidden. The pseudo-elements don’t seem to respect the hidden overflow (mostly when they are transitioned) and we still have the gap problem that usually got solves with applying -webkit-backface-visibility: hidden. If you find any fix for that, please let us know (best via GitHub).

    loading Đang tải...

    template được ưa chuộng