Animated Buttons Archives - csshint - A designer hub https://csshint.com/tag/animated-buttons/ Sun, 19 Feb 2023 11:16:22 +0000 en-US hourly 1 https://wordpress.org/?v=6.3.4 Simple Ghost Button Animation https://csshint.com/simple-ghost-button-animation/ Mon, 12 Oct 2020 01:43:34 +0000 http://csshint.com/?p=4086 Check out this Simple Ghost Button Animation On Hover using css Designed by kitsune. HTML [code language=”html”] <div class="flex"> <a href="#0" class="bttn">Continue</a> </div> <div class="flex dark"> <a href="#0" class="bttn-dark">Continue</a> </div> [/code] CSS / SCSS [code language=”css”] @import ‘https://fonts.googleapis.com/css?family=Source+Sans+Pro:700′; $font:’Source Sans Pro’, sans-serif; $primary:#FF0072; $second:#644cad; $third:#4426a8; *, *::before, *::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; […]

The post Simple Ghost Button Animation appeared first on csshint - A designer hub.

]]> Check out this Simple Ghost Button Animation On Hover using css Designed by kitsune.

ghost button css

ghost button css


HTML

[code language=”html”]

<div class="flex">
<a href="#0" class="bttn">Continue</a>
</div>
<div class="flex dark">
<a href="#0" class="bttn-dark">Continue</a>
</div>

[/code]

CSS / SCSS

[code language=”css”]

@import ‘https://fonts.googleapis.com/css?family=Source+Sans+Pro:700′;

$font:’Source Sans Pro’, sans-serif;
$primary:#FF0072;
$second:#644cad;
$third:#4426a8;

*,
*::before,
*::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

html, body{
height:100%;
width: 100%;
}

body {
padding:0px;
margin:0;
font-family:$font;
background: #F5F0FF;
-webkit-font-smoothing: antialiased;
}

.dark {
background:#24252A;
}

.flex {
min-height:50vh;
display:flex;
align-items:center;
justify-content:center;
}

a.bttn {
color:$primary;
text-decoration:none;
-webkit-transition:0.3s all ease;
transition:0.3s ease all;
&:hover {
color:#FFF;
}
&:focus {
color:#FFF;
}
}

a.bttn-dark {
color:$second;
text-decoration:none;
-webkit-transition:0.3s all ease;
transition:0.3s ease all;
&:hover {
color:#FFF;
}
&:focus {
color:#FFF;
}
}

.bttn {
font-size:18px;
letter-spacing:2px;
text-transform:uppercase;
display:inline-block;
text-align:center;
width:270px;
font-weight:bold;
padding:14px 0px;
border:3px solid $primary;
border-radius:2px;
position:relative;
box-shadow: 0 2px 10px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.1);
&:before {
-webkit-transition:0.5s all ease;
transition:0.5s all ease;
position:absolute;
top:0;
left:50%;
right:50%;
bottom:0;
opacity:0;
content:”;
background-color:$primary;
z-index:-2;
}
&:hover {
&:before {
-webkit-transition:0.5s all ease;
transition:0.5s all ease;
left:0;
right:0;
opacity:1;
}
}
&:focus {
&:before {
transition:0.5s all ease;
left:0;
right:0;
opacity:1;
}
}
}

.bttn-dark {
font-size:18px;
letter-spacing:2px;
text-transform:uppercase;
display:inline-block;
text-align:center;
width:270px;
font-weight:bold;
padding:14px 0px;
border:3px solid $second;
border-radius:2px;
position:relative;
box-shadow: 0 2px 10px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.1);
z-index:2;
&:before {
-webkit-transition:0.5s all ease;
transition:0.5s all ease;
position:absolute;
top:0;
left:50%;
right:50%;
bottom:0;
opacity:0;
content:”;
background-color:$second;
z-index:-1;
}
&:hover {
&:before {
-webkit-transition:0.5s all ease;
transition:0.5s all ease;
left:0;
right:0;
opacity:1;
}
}
&:focus {
&:before {
-webkit-transition:0.5s all ease;
transition:0.5s all ease;
left:0;
right:0;
opacity:1;
}
}
}

[/code]

ghost button css

The post Simple Ghost Button Animation appeared first on csshint - A designer hub.

]]> 18+ Amazing Pure CSS Animated Buttons https://csshint.com/pure-css-animated-buttons/ Wed, 20 May 2020 12:32:07 +0000 http://csshint.com/?p=1743 Latest Collection of free Amazing Pure CSS Animated Buttons Code Examples. 1. animated-css-buttons See the Pen animated-css-buttons by Naved khan (@Navedkhan012) on CodePen. Author Naved Khan Made with Html / CSS demo and codeGet Hosting 2. Stylish Animated CSS Buttons For Blogger. See the Pen Stylish Animated CSS Buttons For Blogger. by Prio-Soft™ (@priosoft) on […]

The post 18+ Amazing Pure CSS Animated Buttons appeared first on csshint - A designer hub.

]]> Latest Collection of free Amazing Pure CSS Animated Buttons Code Examples.

1. animated-css-buttons

Author

  • Naved Khan

Made with

  • Html / CSS

demo and codeGet Hosting

2. Stylish Animated CSS Buttons For Blogger.

Author

  • Prio-Soft

Made with

  • Html / CSS

demo and codeGet Hosting

3. Animated CSS Buttons

Author

  • An

Made with

  • Html / CSS

demo and code Get Hosting

4. Simple CSS Buttons Animation

Author

  • Michael Domanych

Made with

  • Html / CSS

demo and code Get Hosting

5. CSS3 Buttons

Author

  • Oleg Semenov

Made with

  • Html / CSS(Scss)

demo and code Get Hosting

6. CSS + SVG Button Animation

Author

  • Clément

Made with

  • Html(Pug) / CSS(Scss)

demo and code Get Hosting

7. Pure CSS Button

Author

  • Marco Antônio

Made with

  • Html / CSS(Scss)

demo and code Get Hosting

8. Animation with Cubic Bezier

Author

  • Franca

Made with

  • Html / CSS

demo and code Get Hosting

9. Blobs Button

Author

  • Hilary

Made with

  • Html / CSS(SCSS)

demo and code Get Hosting

10. CSS Button with Hover Effect

Author

  • Raj Kamal Chenumalla

Made with

  • Html / CSS(SCSS)

demo and code Get Hosting

13. 100 Days CSS Button N 045

Author

  • Vitor Siqueira

Made with

  • Html / CSS

demo and codea href=”https://bluehost.sjv.io/9WXqK0″ class=”btn_blue floatleft red-btn” target=”_blank” rel=”external nofollow noopener noreferrer”>Get Hosting

14. Auto Width CSS Button Flip

Author

  • Alex Moore

Made with

  • Html / CSS(SCSS)

demo and code Get Hosting

15. CSS3 3D Flip Button

Author

  • Sean Michael

Made with

  • Html / CSS(SCSS)

demo and code Get Hosting

16. Pure CSS Button with Ring Indicator

Author

  • Cole McCombs

Made with

  • Html / CSS

demo and code Get Hosting

17. Button Shine Effect

Author

  • Dan Mensinger

Made with

  • Html / CSS(SCSS)

demo and codeGet Hosting

18. Button Fun

Author

  • Jack Cuthbert

Made with

  • Html / CSS(SASS)

demo and codea href=”https://bluehost.sjv.io/9WXqK0″ class=”btn_blue floatleft red-btn” target=”_blank” rel=”external nofollow noopener noreferrer”>Get Hosting

The post 18+ Amazing Pure CSS Animated Buttons appeared first on csshint - A designer hub.

]]>