Button variation

Hallo liebes Forum, ich bin auf diese Seite gestoßen: https://webdeasy.de/en/top-css-buttons-en/ Button #4 Icon Buttons finde ich absolut Klasse! Ich habe es mittlerweile hinbekommen, dass das Icon RECHTS ist: Ich bin aber total verzweifelt: Ich möchte eine Variation des Buttons so haben, dass das ICON rechts UND links von der Schrift steht. Könnt ihr mir da helfen? Ich bekomme es einfach nicht hin ;( LG und frohes neues Jahr noch.

Der hier verwendete Code

<doctype html> <html> <head> <style> .btn { border: none; font-family: 'Lato'; font-size: inherit; color: inherit; cursor: pointer; padding: 25px 80px; margin: 15px 30px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; outline: none; padding: 25px 120px 25px 120px; position: relative; transition: all 0.3s; background: #3498db; color: #fff; } .btn:before ,.btn:after{ font-family: 'FontAwesome'; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; position: relative; -webkit-font-smoothing: antialiased; background: rgba(0,0,0,0.15); position: absolute; height: 100%; top: 0; line-height: 3; font-size: 140%; width: 60px; content: "\f05a"; } .btn-1:hover { background: #2980b9; } .btn-1:active { background: #2980b9; top: 2px; } .btn-1:before{ left: 0; } .btn-1:after { right: 0; } </style> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'> </head> <body> <button class="btn btn-1 btn-sep icon-info">Button</button> </body> </html>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!