Before we look at the buttons, let’s look at the settings common to all of them.
HTMLThe buttons will use very simple HTML code:
Subscribe
CSSAlso, all buttons will have common settings for the caption text and deselect links:
ButtonText ( font: 18px/1.5 Helvetica, Arial, sans-serif; color: #fff; ) a ( color: #fff; text-decoration: none; )
Typically, the user expects a fairly soft effect when hovering the mouse over a link or button. And in our case, the button changes size - it increases, showing an additional message.
Basic CSS CodeTo begin with, we only need to give the button a shape and color. Define a height of 28px and a width of 115px, add margins and padding, and also give the button a light border.
#button1 ( background: #6292c2; border: 2px solid #eee; height: 28px; width: 115px; margin: 50px 0 0 50px; padding: 0 0 0 7px; overflow: hidden; display: block; )
CSS3 EffectsSome people like it when a simple button is accompanied by quite a lot of CSS code. This section provides additional CSS3 styles for our button. You can do without them, but they give the button a more modern look.
Round the corners of the frame and add a gradient. This uses a little trick with a dark gradient that interacts with any background color.
/*Rounded corners*/ -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; /*Gradient*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
CSS AnimationNow let's set up the CSS transition. The animation will be used for any property changes and will last half a second.
Mouse overAll that remains is to add a style to expand the button when you hover the mouse over it. The button must be 230px wide to display the entire message.
#button1:hover ( width: 230px; )
Simple change of color tone
Very simple and popular CSS effect for the button. When you hover the mouse cursor, the tone of the background color smoothly changes.
Basic CSS CodeThe CSS code is very similar to the previous example. A different background color is used and the shape is slightly changed. It also centers the text and sets the line height for the button so that vertical centering occurs.
#button2 ( background: #d11717; border: 2px solid #eee; height: 38px; width: 125px; margin: 50px 0 0 50px; overflow: hidden; display: block; text-align: center; line-height: 38px; )
CSS3 EffectsSet the rounding of corners, a gradient for the background and an additional shadow. Using rgba we make the shadow black and transparent.
/*Rounded corners*/ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; /*Gradient*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); /*Shadow*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
CSS AnimationThe animation is practically no different from the previous example.
/*Transition*/ -webkit-transition: All 0.5s ease; -moz-transition: All 0.5s ease; -o-transition: All 0.5s ease; -ms-transition: All 0.5s ease; transition: All 0.5s ease;
Mouse overWhen hovering the mouse cursor, a different background color will be set. Try choosing a lighter color option in Photoshop for a great effect.
#button2:hover ( background-color: #ff3434; )
This effect can be quite impressive depending on the choice of background image. The demo uses a nondescript background and the effect looks nondescript. Try using a different picture and the effect may be stunning.
Basic CSS CodeThe main part of the code is the same as the previous examples. Please note that we are using a background image. Starting position background is set to "0 0". When you hover the cursor, the position shifts vertically.
#button3 ( background: #d11717 url("bkg-1.jpg"); background-position: 0 0; text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3); font-size: 22px; height : 58px; width: 155px; margin: 50px 0 0 50px; overflow: hidden; display: block; text-align: center; line-height: 58px; )
CSS3 EffectsThere is nothing special in this example - rounded corners and shadows.
/*Rounded corners*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /*Shadow*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
CSS AnimationThe animation for this case lasts longer to create a smooth and interesting effect.
/*Transition*/ -webkit-transition: All 0.8s ease; -moz-transition: All 0.8s ease; -o-transition: All 0.8s ease; -ms-transition: All 0.8s ease; transition: All 0.8s ease;
Mouse overNow it's time to move the background image. The starting position was "0 0". Set the second parameter to 150px. To shift horizontally, you need to change the first parameter.
#button3:hover ( background-position: 0px 150px; )
3D button press simulation
The last example in our lesson is about the popular 3D method of simulating a button press when hovering the mouse cursor over it. The animation for this case is so simple that it doesn't even require a CSS transition. But the end result is quite impressive.
Basic CSS CodeCSS code for our button.
#button4 ( background: #5c5c5c; text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3); font-size: 22px; height: 58px; width: 155px; margin: 50px 0 0 50px; overflow: hidden ; display: block; text-align: center; line-height: 58px; )
CSS3 EffectsIN in this case CSS3 is no longer a nice option. To achieve the effect, shadows and a gradient are required. A sharp shadow creates the appearance of a 3D button.
/*Rounded corners*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /*Shadow*/ -webkit-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); /*Gradient*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
Mouse overIn this case we have the largest hover section. The length of the shadow is reduced and the margins are used to create a blend of the dark area. All together creates the illusion of pressing a button. Flipping the gradient enhances the effect.
#button4:hover ( margin-top: 52px; /*Shadow*/ -webkit-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 4px 0px rgba(0 , 0, 0, 0.8); box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); /*Gradient*/ background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4 )); background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); background-image: -ms-linear-gradient( bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); background-image: linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); )
Good day to all. A long time ago I published a post as a blog. Today I was in the mood to start designing it. The native gadget about the author itself is completely boring and not attractive.
As a result, it was possible to create an individual style, quite attractive and informative for your own design, most likely not even a widget, but a profile card. That's what we'll call it. Well, something like this
Working version on the test blog in the sidebar at the very bottom
What's on it
1. Your profile photo.
2. Beautiful design of the card itself, which is easy to customize
3. Your nickname, first or last name
4 You can indicate your occupation, hobby
5.Add 2 buttons to required pages. These could be links to your full author page, to home page, map, master classes, public pages in social networks. Anything.
6. The card will fit perfectly in the sidebar of the blog.
Copy the code below and we will sculpt your profile card further.
![](https://fighters.ru/wp-content/uploads/2020/" alt=)
" alt="profile" class="profile" />!}
Vika Barad Blogger
my blogGroup on VK
.snip1 (
font-family: "Roboto", Arial, sans-serif;
color: #fff;
position: relative;
overflow: hidden;
margin: 10px;
min-width: 230px;
max-width: 315px;
width: 100%;
color: #ffffff;
text-align: left;
line-height: 1.4em;
background-color: #141414;
}
.snip1 * (
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.snip1 img (
max-width: 100%;
vertical-align: top;
opacity: 0.85;
}
.snip1 figcaption (
width: 100%;
background-color: #141414;
padding: 25px;
position: relative;
}
.snip1 figcaption:before (
position: absolute;
content: "";
bottom: 100%;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 55px 0 0 400px;
border-color: transparent transparent transparent #141414;
}
.snip1 figcaption a (
padding: 5px;
border: 1px solid #ffffff;
color: #ffffff;
font-size: 0.7em;
text-transform: uppercase;
margin: 10px 0;
display: inline-block;
opacity: 0.65;
width: 47%;
text-align: center;
font-weight: 600;
letter-spacing: 1px;
text-decoration: none;
}
.snip1 figcaption a:hover (
opacity: 1;
}
.snip1 .profile (
border-radius: 50%;
position: absolute;
bottom: 100%;
left: 25px;
z-index: 1;
max-width: 90px;
opacity: 1;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}
.snip1 .follow (
margin-right: 6%;
border-color: #2980b9;
color: #2980b9;
}
.snip1 h2 (
margin: 0 0 5px;
font-weight: 300;
}
.snip1 h2 span (
display: block;
font-size: 0.5em;
color: #2980b9;
}
.snip1 p (
margin: 0 0 10px;
font-size: 0.8em;
letter-spacing: 1px;
opacity: 0.8;
}
.snip1:hover:before,
.snip1.hover:before (
bottom: 0;
box-shadow: 0 0 0px white;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
$(".hover").mouseleave(
function()(
$(this).removeClass("hover");
}
);
https://w-dog.ru/wallpapers/10/19/380923269777589.jpg - this is the address of the picture - background at the top
https://lh3.googleusercontent.com/a-/AAuE7mA2BanaiBKNuN8BR_ECcqksSRfEzyzRUwTkbQwKqw=s96-cc - the address of your thumbnail. You can copy it in your Google profile or set a different avatar.
In the lines marked in pink, write your nickname, name, occupation and explanatory text.
Accordingly, what is highlighted in green is the addresses of the pages to which the transition will occur when you click the button.
I also marked the main background of the profile card with color in several places #141414;
The settings are very basic and I don’t think any questions will arise. If so, write in the comments. Let's figure it out.
We install the finished widget code in the section DESIGN - HTML/JavaScript gadget in the blog sidebar. By the way, I think that it will not look bad at the top, when the user has the opportunity to immediately get to know the author. The background and image can be easily changed depending on your mood or time of year. It will always be new. Well, it's up to you.
All the best and good luck.
CSS is without a doubt one of the most important markup languages we use. And although HTML describes the structure of a document, its behavior can be unpredictable, depending on the browser version. CSS is the tool that will allow us to correct all inconsistencies in the display of the page, as well as design its appearance.
Hiding text using a paragraphThis technique will be very useful for a company logo. Most often, a picture is used as a logo, but for SEO, it would be nice to display the company name in h1 tags. This example is the most The best way implement this. In fact, we're simply hiding the text off-screen and assigning a background image instead.
H1 ( text-indent:-9999px; margin:0 auto; width:400px; height:100px; background:transparent url("images/logo.jpg") no-repeat scroll; )
Styling links depending on file formatThis example aims to improve the user experience. Often on the Internet, we follow links without knowing where they lead. The following code snippet is used to display small icons next to links. Such pictures will tell the user that this is an external link, email address, pdf file, picture, etc.
/* external link */ a( padding-right: 20px; background: url(external.gif) no-repeat center right; ) /* email */ a( padding-right: 20px; background: url(email.png ) no-repeat center right; ) /* pdfs */ a( padding-right: 20px; background: url(pdf.png) no-repeat center right; )
Removing scrollbars from a multiline field in IEInternet Explorer has an annoying habit of adding scrollbars to a multiline field even when its contents don't exceed given size. This flaw can be easily corrected with the following line of code:
Textarea( overflow:auto; )
Initial letterToday it is a very common phenomenon in blogs and news sites. You'll be surprised how easy it is to implement, and how well it degrades in older browsers.
P:first-letter( display:block; margin:5px 0 0 5px; float:left; color:#FF3366; font-size:60px; font-family:Georgia; )
CSS transparencyTransparency is a property that different browsers, is prescribed in different ways. With the following code snippet, you can assign transparency to all browsers at once.
Transparent ( filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; )
CSS Reset by Eric MeyerIn fact, css-reset, proposed by Eric Meyer, has already become a widespread standard of use. Since it has been adapted by many famous developers, you can rest assured of its quality.
Html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td ( margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align : baseline; background: transparent; ) body ( line-height: 1; ) ol, ul ( list-style: none; ) blockquote, q ( quotes: none; ) blockquote:before, blockquote:after, q:before, q :after ( content: ""; content: none; ) /* remember to define focus styles! */ :focus ( outline: 0; ) /* remember to highlight inserts somehow! */ ins ( text-decoration: none; ) del ( text-decoration: line-through; ) /* tables still need "cellspacing="0"" in the markup */ table ( border-collapse: collapse; border-spacing : 0; )
Image preloaderSometimes it's useful to pre-load your images to eliminate lag and flickering when accessing the desired element.
Div.loader( background:url(images/hover.gif) no-repeat; background:url(images/hover2.gif) no-repeat; background:url(images/hover3.gif) no-repeat; margin-left: -10000px; )
Simple css sprite for a buttonAvailability of a button or link with background image- a common occurrence, in addition, additional effects are often applied to such elements to improve the user interface. One of these effects is the mouse over button indicator. Using a sprite, we can implement this effect by changing the background-positon property to a given value so that a background image is displayed when the mouse hovers over the button. A simple but effective solution.
A ( display: block; background: url(sprite.png) no-repeat; height: 30px; width: 250px; ) a:hover ( background-position: 0 -30px; )
Google Font APINot long ago, Google implemented a wonderful resource for web developers that allows them to download and use new, non-standard fonts on the page. There are even different font options available for download, bold, italic, etc. Although Google's collection is still limited, there is plenty in stock a large number of fonts. First, include a dynamically generated CSS file with the names of the fonts and variations you need, and then just use the font names in the CSS as usual. Additional information You can read it using the Google Font API.
Inconsolata:italic|Droid+Sans"> body ( font-family: "Tangerine", "Inconsolata", "Droid Sans", serif; font-size: 48px; )
Hacks for different browsersSometimes it is useful to fix a bug in a particular browser, and conditional comments are not always the best solution for this. This list of browser hacks from Chris Coyier will help you assign properties to specific browsers using simple css.
/* IE 6 */ * html .yourclass ( ) /* IE 7 */ *+html .yourclass( ) /* IE 7 and modern browsers */ html>body .yourclass ( ) /* Modern browsers (not IE 7) */ html>/**/body .yourclass ( ) /* Opera 9.27 and below */ html:first-child .yourclass ( ) /* Safari */ html body:last-child .yourclass ( ) /* Safari 3+ , Chrome 1+, Opera 9+, Fx 3.5+ */ body:nth-of-type(1).yourclass ( ) /* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */ body:first -of-type .yourclass ( ) /* Safari 3+, Chrome 1+ */ @media screen and (-webkit-min-device-pixel-ratio:0) ( .yourclass ( ) )
Fixed BasementYou might think that creating a footer that is always glued to the bottom of the screen is a difficult task. However, it's not at all difficult if you want a simple basement. We'll have to use a little IE6 hack here, but other than that, it's very easy.
#footer ( position:fixed; left:0px; bottom:0px; height:30px; width:100%; background:#999; ) /* IE 6 */ * html #footer ( position:absolute; top:expression(( 0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight: document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop: document.body.scrollTop)) +"px"); )
Rotate an imageRotating an image can be quite useful, especially if it can be used instead of loading a new, pre-rotated image. Let's say you want to use only one image for an arrow, but you have several of them on your page, all facing different directions. Here is the solution to your problem:
Img.flip ( -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; - ms-filter: "FlipH"; )
ClearfixNot long ago, someone decided it was time to strip the stream of floats without adding additional markup to the document. As a result of this solution, a class was created that can be applied to a container containing floating elements to clear them. This is a very convenient and widespread method today.
Clearfix:after ( visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; ) .clearfix ( display: inline-block; ) /* start commented backslash hack */ * html .clearfix ( height: 1%; ) .clearfix ( display: block; ) /* close commented backslash hack */
Rounded cornersWith the gradual adoption of CSS3 in modern browsers, creating rounded corners has become very easy. Unfortunately, there is no support for CSS3 in IE yet, including version 8, but it will be added in IE9.
Round( -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; /* future proofing */ -khtml-border-radius: 10px; /* for old Konqueror browsers */ )
Overriding stylesPeople who don't know about !important in CSS continue to amaze me, as it is such a powerful and easy-to-use tool. Very simply, any rule with !important at the end will override the same rule applied to that element anywhere in the CSS file or in line styles.
P( font-size:20px !important; )
Font faceFont-face was not widely used until last year, although it has been around since the days when IE6 was considered a modern browser. This feature is currently well supported. modern browsers and offers great way using unsafe fonts in your projects. To save time, you can use a special Font Squirrel Font Face generator.
@font-face ( font-family: "Graublau Web"; src: url("GraublauWeb.eot"); src: local("☺"), url("GraublauWeb.woff") format("woff"), url ("GraublauWeb.ttf") format("truetype"); )
Centering the siteA common design technique is horizontal centering of the site. This is very easy to implement.
Min-height in IEThis example fixes a simple but annoying bug in IE when setting a minimum height. In general, IE interprets height as a minimum height, so if IE doesn't have height set to auto, the following trick will fix this bug.
Box ( min-height:500px; height:auto !important; height:500px; )
Uploading a pictureThis image loading effect simulates an ajax loading by displaying a preloader until all the content is loaded. This solution is perfect for large, slow-loading images.
Img ( background: url(loader.gif) no−repeat 50% 50%; )
Vertical centeringThis small piece of code will allow you to vertically center the contents of a container, without using any additional markup. All you need to do is render the container as a table cell and then set the vertical-align attribute to a value.
Container ( min-height: 10em; display: table-cell; vertical-align: middle; )
Creating cutsFirst, let's figure out what a cut-in is? Sidebars are usually found on news resources and magazine sites, in the form of a small block of text located inside an article, sometimes they contain people's opinions or quotes. You'll be glad to know that they are very easy to make, and when used correctly, insets can greatly improve the user experience of an article.
Pullquote ( width: 300px; float: right; margin: 5px; font-family: Georgia, "Times New Roman", Times, serif; font: italic bold #ff0000 ; )
Text selectionNot everyone knows that it is possible to change the color of text selected in the browser. This requires only two selectors.
::selection ( color: #000000; background-color: #FF0000; ) ::-moz-selection ( color: #000000; background: #FF0000; )
Adding a page breakThis example is again aimed at improving the user interface when printing. For example, when printing an article, it may be useful to separate the comments from the text of the article and move them to a separate page. If you add class.page-break to a comment block, then all comments, when printed, will be displayed on separate page. In general, this class can be used anywhere on your site.
Page-break( page-break-before:always; )